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画像が表示されていれば完成です。

いますぐBiNDクラウドを無料で使ってみる