Showing posts with label SVG. Show all posts
Showing posts with label SVG. Show all posts

Sunday, September 23, 2012

pycairoを使用してSVGファイルに直線を描画する

pycairoを使用してSVGファイルに直線を描画するには、以下のコードを実行します。
import cairo
import rsvg

file = file('test1.svg', 'w')
width = 200
height = 200
surface = cairo.SVGSurface(file, width, height)
ctx = cairo.Context(surface)
ctx.set_source_rgb(0xcc/float(0xff), 0xdd/float(0xff), 0xff/float(0xff))
ctx.move_to(0, 0)
ctx.line_to(200, 200)
ctx.stroke()
surface.finish()


出力画像

動作環境
CentOS6.2, python 2.6.6

補足
pycairoでSVGを使用するにはpyrsvgをインストールします。
yum install gnome-python2-rsvg

Thursday, June 18, 2009

groovyでSVGをPNGにレンダリングする

groovyでSVGをPNGにレンダリングするには、以下のコードを実行します。


import java.lang.ref.*
import java.awt.*
import java.awt.image.*
import javax.imageio.*
import org.apache.batik.bridge.*
import org.apache.batik.dom.svg.*
import org.apache.batik.util.*
import org.w3c.dom.svg.*
import org.apache.batik.ext.awt.*;

img = new BufferedImage(300, 300, BufferedImage.TYPE_INT_ARGB)
parser = XMLResourceDescriptor.getXMLParserClassName()
SAXSVGDocumentFactory factory = new SAXSVGDocumentFactory(parser)
svgf = new File("./masked-image-dropshadow.svg");
URI furi = svgf.toURI();
svgd = factory.createDocument(furi.toString());
userAgentAdapter = new UserAgentAdapter();
bridgeContext = new BridgeContext(userAgentAdapter);
builder = new GVTBuilder();
rsvgn = builder.build(bridgeContext, svgd)
Graphics2D g2d = img.getGraphics()
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON)
g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR)
//g2d.getRenderingHints().remove(RenderingHintsKeyExt.KEY_BUFFERED_IMAGE);
g2d.setRenderingHint(RenderingHintsKeyExt.KEY_BUFFERED_IMAGE, new WeakReference(img));
rsvgn.paint(g2d);
g2d.dispose();
ImageIO.write(img, "png", new File("sample993a.png"));


元画像(sf.jpg)


入力SVG(masked-image-dropshadow.svg)

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300">

<defs>
<mask id="mask1" maskUnits="userSpaceOnUse"
x="0" y="0" width="300" height="300">
<rect x="50" y="50" width="200" height="200"
rx="20" ry="20"
style="fill:#ffffff; "/>
</mask>
<filter id="gbf">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="shadow"/>
<feOffset in="shadow" dx="4" dy="4" result="shadow2"/>
<feComposite in="SourceGraphic" in2="shadow2" operator="over"/>
</filter>
</defs>

<g filter="url(#gbf)">
<image x="50" y="50" width="200px" height="200px"
xlink:href="sf.jpg" mask="url(#mask1)" >
<title>sf.jpg</title>
</image>
</g>
<!--mask="url(#mask1)" -->
</svg>


出力画像(sample993a.png)
groovyでSVGをPNGに変換した画像

Wednesday, June 17, 2009

SVGRendererで図形を回転させる

SVGRendererで図形を回転させるには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample992a.svg", 200, 200){
butterflyShape( x: 0, y: 0, width: 200, height: 200,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
){
transformations{
rotate(angle:45, x:100, y:100)
}
}
}


出力SVG(sample992a.svg)をPNGでレンダリングした画像
SVGRendererで図形を回転させた画像


動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで図形を回転させる (GraphicsRendererでの同様の処理)

Tuesday, June 16, 2009

SVGRendererで透明な文字列を描画する

SVGRendererで透明な文字列を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample991a.svg", 200, 200){
image(file: "sf.jpg")
font(new java.awt.Font('Tahoma', java.awt.Font.BOLD, 110))
subtract( borderColor: no, fill: 'black', opacity:0.5){
rect(x:20, y:20, width: 160, height: 160)
text( x:30, y:60, text: "SF")
}
}


元画像(sf.jpg)


出力SVG(sample991a.svg)をPNGにレンダリングした画像
SVGRendererで透明な文字列を描画した画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで透明な文字列を描画する (GraphicsRendererでの同様の処理)

Monday, June 15, 2009

SVGRendererで文字列にドロップシャドウをつける

SVGRendererで文字列にドロップシャドウをつけるには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample990a.svg", 200, 200){
image(file: "SF.JPG")
font(new java.awt.Font('Tahoma', java.awt.Font.BOLD, 26))
text( x:10, y:80,
text: "San Francisco",
fill: color("#ffffff"),
borderColor: no
){
filters {
dropShadow()
}
}
}


元画像(sf.jpg)


出力画像(sample990a.svg)
SVGRendererで文字列にドロップシャドウをつけた画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで画像の上に影付き文字列を描画する (GraphicsRendererでの同様の処理)

Sunday, June 14, 2009

SVGRendererでテクスチャを繰り返し描画する

SVGRendererでテクスチャを繰り返し描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample989a.svg", 200, 200){
background(color: color("white"))
rect(x:0, y:0, width: 200,
height: 200, borderColor:no){
texturePaint(x: 0, y: 0, file: "flower1.png" )
}
}


元画像(flower1.png)


出力SVG(sample989a.svg)をfirefoxで表示させた画面


動作環境
Groovy1.6.0, JDK1.6 Update12

Saturday, June 13, 2009

SVGRendererでバッジを描画する

SVGRendererでバッジを描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample988a.svg", 200, 200){
star( cx:100, cy:100, count:40, ir:80, or:90,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample988a.svg)をPNGでレンダリングした画像
SVGRendererで描画したバッジ

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyでバッジ画像を描画する (GraphicsRendererでの同様の処理)

Friday, June 12, 2009

SVGRendererで放射ストライプを描画する

SVGRendererで放射ストライプを描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample987a.svg", 200, 200){
background(color: color("white"))
rays(cx:90, cy:110, radius:200, rays:32,
fill:color("#aaccff"), borderColor:no)
}


出力SVG(sample987a.svg)をPNGでレンダリングした画像
SVGRendererで描画した放射ストライプ

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで放射ストライプを描画する (GraphicsRendererによる同様の処理)

Thursday, June 11, 2009

SVGRendererで画像を半透明にして重ね合わせる

SVGRendererで画像を半透明にして重ね合わせるには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample986a.svg", 200, 200){
image(file: 'sf.jpg', x:0, y:0)
image(file: 'sample3b.jpg', x:10, y:10, opacity:0.5)
}


元画像(sf.jpg)


出力画像(sample3b.jpg)


出力SVG(sample986a.svg)をPNGにレンダリングした画像
SVGRendererで半透明にして重ね合わせた画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで画像を半透明にして重ね合わせる (GraphicsRendererによる同様の処理)

Wednesday, June 10, 2009

SVGRendererでシェイプストロークを使用して図形を描画する

SVGRendererでシェイプストロークを使用して図形を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample985a.svg", 200, 200){
dolphinShape( x:0, y:20, width:200, height:160,
borderColor: color("#aaccff"),
){
shapeStroke(advance:20){
star(cx:10, cy:10, or:10, ir:7, count:5)
rect(x:5, y:5, height:10, width:10)
}
}
}


出力SVG(sample985a.svg)をPNGでレンダリングした画像
SVGRendererでシェイプストロークを使用して描画した画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyでシェイプストロークを使用して図形を描画する (GraphicsRendererでの同様の処理)

Tuesday, June 09, 2009

SVGRendererで揺れのあるストロークで図形を描画する

SVGRendererで揺れのあるストロークで図形を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample984a.svg", 200, 200){
dolphinShape( x:0, y:20, width:200, height:160,
fill: color("#cceeff"),
borderColor: color("#aaccff")
){
wobbleStroke(amplitude:3, detail:2)
}
}


出力SVG(sample984a.svg)をPNGでレンダリングした画像
SVGRendererで揺れのあるストロークで描画した画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで揺れのあるストロークを使用して図形を描画する (GraphicsRendererでの同様の処理)

Monday, June 08, 2009

SVGRendererで円状に文字列を描画する

SVGRendererで円状に文字列を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample983a.svg", 200, 200){
xpath(borderColor:color("red")){
textStroke(text:"Groovy Groovy Groovy Groovy Groovy Groovy Groovy !!!",
font: new java.awt.Font('Tahoma', java.awt.Font.PLAIN, 20)
);
xmoveTo(x:180, y:100)
xarcTo(angle:180, largeArc: true, sweep:true, rx:80, ry:80, x:20, y:100)
xarcTo(angle:180, largeArc: true, sweep:true, rx:80, ry:80, x:180, y:100)
}
circle( cx: 100, cy: 100, radius:60, borderColor:color("orange")){
textStroke(text:"Groovy Groovy Groovy Groovy Groovy !!!",
font: new java.awt.Font('Tahoma', java.awt.Font.PLAIN, 20)
);
}
}


出力SVG(sample983a.svg)をPNGにレンダリングした画像
SVGRendererで円状に描画した文字列

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで円状に文字列を描画する (GraphicsRendererによる同様の処理)

Sunday, June 07, 2009

SVGRendererで半透明の文字列を描画する

SVGRendererで画像の上に半透明の文字列を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample982a.svg", 200, 200){
image(file: "sf.jpg")
font(new java.awt.Font('Tahoma', java.awt.Font.BOLD, 26))
text( x:10, y:100,
text: "San Francisco",
fill: color("#ffffff").derive(alpha: 0x80),
borderColor: color("#ffffff").derive(alpha: 0xf0),
borderWidth: 1
)
}


元画像(sf.jpg)


出力SVG(sample982a.svg)をPNGにレンダリングした画像
SVGRendererで描画した半透明の文字列

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで画像の上に半透明の文字列を描画する (GraphicsRendererでの同様の処理)

Saturday, June 06, 2009

SVGRendererで背景色を指定する

SVGRendererで背景色を指定するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample981a.svg", 200, 200){
background(color: color("#88aadd"))
fishShape( x:0, y:40, width:200, height:120,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample981a.svg)をPNGにレンダリングした画像
SVGRendererで背景色を指定した画像

動作環境
Groovy1.6.0, JDK1.6 Update12

Friday, June 05, 2009

SVGRendererでストロークにグラデーションをかける

SVGRendererでストロークにグラデーションをかけるには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample980a.svg", 200, 200){
rect( x:10, y:10, width:180, height:180,
arcWidth: 20, arcHeight:20,
fill: color("#fffff0"),
borderWidth: 6
){
borderPaint(){
gradientPaint( x1: 0, y1: 0, x2: 0, y2: 200,
color1: "#ffffe0", color2: "#f0d090")
}
}
}


出力SVG(sample980a.svg)をPNGにレンダリングした画像
SVGRendererでストロークにグラデーションをかけた画像

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererでグラデーションのかかった星を描画する (グラデーションで塗りつぶす場合はこちら)
groovyでストロークにグラデーションをかける (GraphicsRendererでの同様の処理)

Thursday, June 04, 2009

SVGRendererでグラデーションのかかった星を描画する

SVGRendererでグラデーションのかかった星を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample979a.svg", 200, 200){
star( cx:100, cy:100, count:5, ir:40, or:90,
borderColor: color("#d0b070"),
borderWidth: 2
){
gradientPaint( x1: 0, y1: 0, x2: 0, y2: 200,
color1: "#ffffe0", color2: "#f0d090")
}
}


出力SVG(sample979a.svg)をPNGにレンダリングした画像
SVGRendererで描画したスター

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
groovyで図形をグラデーションで塗りつぶす (GraphicsRendererでの同様の処理)

Wednesday, June 03, 2009

SVGRendererで円弧を描画する

SVGRendererで円弧を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample978a.svg", 200, 200){
arc( x: 0, y: 0, width: 198, height: 198,
start:0, extent:45,
borderColor: color("#103080"),
borderWidth: 2,
fill: color("#bbddff"),
close: "pie"
)
}


出力SVG(sample978a.svg)をPNGでレンダリングした画像
SVGRendererで描画したパイ

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションに塗りつぶす方法)
groovyで円弧を描画する (GraphicsRendererでの同様の処理)

Tuesday, June 02, 2009

SVGRendererで四隅の角丸を指定して四角を描画する

SVGRendererで四隅の角丸を指定して四角を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample977a.svg", 200, 200){
roundRect( x:10, y:10, width:180, height:180,
topLeftHeight: 10, topLeftWidth:10,
topRightHeight: 20, topRightWidth:20,
bottomLeftHeight: 30, bottomLeftWidth:30,
bottomRightHeight: 40, bottomRightWidth:40,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample977a.svg)をPNGにレンダリングした画像
SVGRendererで描画した四隅の角丸が異なる四角

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererで角丸四角を描画する
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションで塗りつぶす方法)
groovyで四隅の角丸を指定して四角を描画する (GrapchisRendererでの)

Monday, June 01, 2009

SVGRendererでサイを描画する

SVGRendererでサイを描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample976a.svg", 200, 200){
rhinoShape( x:0, y:10, width:200, height:180,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample976a.svg)をPNGにレンダリングした画像
SVGRendererで描画したサイ

動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションで塗りつぶす方法)
groovyでサイの形を描画する (GraphicsRendererでの同様の処理)

Sunday, May 31, 2009

SVGRendererで正多角形を描画する

SVGRendererで正多角形を描画するには、以下のコードを実行します。


import groovy.swing.j2d.svg.*

gr = new SVGRenderer()
gr.renderToFile("sample975a.svg", 200, 200){
regularPolygon( cx:100, cy:100, radius:80, sides:5,
fill: color("#bbddff"),
borderColor: color("#103080"),
borderWidth: 2
)
}


出力SVG(sample975a.svg)をPNGにレンダリングした画像
SVGRendererで描画した正多角形


動作環境
Groovy1.6.0, JDK1.6 Update12

関連項目
SVGRendererでグラデーションのかかった星を描画する (図形をグラデーションで塗りつぶす方法)
groovyで正多角形を描画する (GraphicsRendererで描画した同様の処理)