2011/07/30

SVGを描画する

SVGとは、Scalable Vector Graphicsの略です。
HTML5では、外部ファイルにある拡張子がSVGのファイルを読み込んで表示させることができます。
SVGファイルはその名の通りベクターベースなので拡大してもピクセルがカクカクになったりしないという利点があります。また、XMLベースなのでグラフィックツールなどを利用して簡単にデータが作成できるという利点もあります。

以下は四角形を描画する例です。





<svg height="150" width="300" xmlns="http://www.w3.org/2000/svg">
 <rect height="100" style="fill: orange;" width="100" x="30" y="30"></rect>
 <rect height="100" ry="8" style="fill: black;" width="100" x="150" y="30"></rect>
</svg>



円の例です。





<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" style="fill: blue;" width="100" />
</svg>



楕円形です。





<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
 <ellipse cx="50" cy="50" rx="50" ry="20" style="fill: skyblue;">
</ellipse></svg>




線の例です。





<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 <polyline fill="none" points="20,20 100,100 180,30" stroke-width="3" stroke="black"></polyline>
</svg>



ポリゴンの例です。





<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 <polygon fill="blue" points="20,20 100,100 180,30" stroke-width="3" stroke="black"></polygon>
</svg>



グラフィックツールを使えば、パスやグラデーションを使った以下の様な絵もSVGで描画可能です。





<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<polygon fill="#FFFF00" stroke="#000000" stroke-miterlimit="10" points="153,184 100.271,158.186 49.113,186.988 57.37,128.863
    14.168,89.109 72,79 96.458,25.628 123.943,77.506 182.261,84.274 141.416,126.445 "/>
<path fill="#C7B299" stroke="#000000" stroke-miterlimit="10" d="M239.192,113.619c4.675,4.697,4.657,12.296-0.04,16.971L119,231
    c-4.697,4.675-14.052,25.583-18.727,20.886l-8.465-8.505C87.133,238.684,109.303,228.675,114,224l99.757-118.926
    c4.696-4.675,12.295-4.657,16.97,0.04L239.192,113.619z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="207.1367" y1="233.4961" x2="281.1367" y2="233.4961" gradientTransform="matrix(-0.9478 0.3187 -0.3187 -0.9478 540.8281 359.5)">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="0.1832" style="stop-color:#FAFAFA"/>
    <stop  offset="0.3909" style="stop-color:#EDEDED"/>
    <stop  offset="0.6108" style="stop-color:#D6D6D6"/>
    <stop  offset="0.8375" style="stop-color:#B6B6B6"/>
    <stop  offset="1" style="stop-color:#9B9B9B"/>
</linearGradient>
<circle fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10" cx="235" cy="216.001" r="37"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M211.001,187.823C220.17,191.074,227,203.575,227,218.5
    c0,13.298-5.423,24.673-13.091,29.294"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M263.954,239.872c-6.184-2.017-12.876-13.377-15.964-27.979
    c-2.752-13.01-1.847-24.828,1.807-30.323"/>
</svg>




文字を描く例です。

テキストです。 パスに沿ったテキストです。



<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg">
 <text fill="skyblue" font-family="sans-serif" font-size="30" stroke-width="1" stroke="blue" x="30" y="30">
テキストです。
 </text>
 <defs>
  <path d="M30,100 C100,100 150,200 200,100 C250,200 300,150 400,150" id="textPath1"></path>
 </defs>
 <text fill="skyblue" font-family="sans-serif" font-size="30" stroke-width="1" stroke="blue" x="30" y="100">
  <textpath xlink:href="#textPath1">パスに沿ったテキストです。</textpath>
 </text>
</svg>



以下は、外部にあるsvgファイルを表示する例です。ファイルは存在しないので以下ではエラーメッセージが表示されます。






<object data="svgファイルのURL" type="image/svg+xml" width="400" height="300"></object>


0 件のコメント:

コメントを投稿