SVGチュートリアル

SVG要素

SVG<image>画像要素

SVG <image>要素は、ビットマップ画像をSVG画像内に埋め込むために使用されます。これにより、ビットマップ画像の上または側に描画することができます。SVG画像形式変換ソフトウェアはJPEG、PNG形式をサポートしています；SVG内で、image要素も任意のレストレート画像に埋め込むことができます。レストレート画像では、SVGのフィルタ、マスク、回転、クリップ、およびその他のツールを使用して内容を処理できます。

SVG画像の例

これはSVG imageの例です：

例

　　　　<svg　width="500"　height="160">
　　　　　　　　<rect　x="10"　y="10"　height="130"　width="500"　style="fill:　#000000"></rect>
　　　　　　　　<image　x="20"　y="20"　width="300"　height="80"　xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg>
　　　　　　　　<image　x="20"　y="20"　xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line　x1="25"　y1="80"　x2="350"　y2="80"></line>
　　　　</svg>

テストをしてみる‹/›

実行後の画像効果：

まず、黒色の長方形を描画します。次に、私のロゴを画像として黒色の長方形の上部に描画します。最後に、私の画像と黒色の長方形の上部に白線を描画します。

SVG要素がファイルに記載されている順序は、それらが描画される順序です。後の要素は前の要素の上に描画されます。

また、<image>要素を使用して他のSVG画像を埋め込むことができます。これはビットマップ画像ではありません。

画像を回転する例：

例

<svg　width="500"　height="160">
<image　x="90"　y="-65"　width="100"　height="146"　transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

テストをしてみる‹/›

使用方法の説明：

widthとheightで画像の幅と高さを定義。
xlink：hrefで画像のリンクを定義。

最終実行結果は以下の通り:

SVG<switch>要素 SVGfill属性