BiNDでSVG形式の画像を使う方法

BiNDのカスタムタグパーツを使用してSVGファイルをBiNDで作ったサイトで表示する方法を紹介します。SVGファイルはベクターデータの画像なので解像度に関係なくきれいに表示できます。

SVGファイルはベクターデータの画像ですので、高解像度のデバイスで見たり、拡大表示したりても、画像が粗くならずにきれいに表示されるという利点があります。近年、Webで扱う画像データとして注目されています。

そこで、BiNDでサイトを作る際に、SVGファイルを使う方法を紹介します。

カスタムタグでできる、簡単3ステップ

BiND標準の画像パーツはSVG形式に対応していませんので、代わりにカスタムタグを使用します。

svg_step_01
1.SVG画像を表示したいところにカスタムタグパーツを挿入します。

svg_source
2.SVGファイルは画像ですが、テキストエディタで開くとソースが表示されます。そのソースを丸ごとコピーします。

svg_step_02
3.コピーしたソースをカスタムタグのHTMLソースエディタにそのまま貼り付けます。

svg_step_03
カスタムタグが挿入できたら適用してください。

svg_step_04
プレビューしてSVG画像が表示されていれば完成です。

  • SVG形式の画像は高解像度でもきれいに表示される
  • SVGファイルをテキストエディタで開くとソースが表示される
  • BiNDのカスタムタグを使用してSVGファイルのソースを貼り付ける

関連記事