SVGファイルはベクターデータの画像ですので、高解像度のデバイスで見たり、拡大表示したりても、画像が粗くならずにきれいに表示されるという利点があります。近年、Webで扱う画像データとして注目されています。
そこで、BiNDupでサイトを作る際に、SVGファイルを使う方法を紹介します。
カスタムタグでできる、簡単3ステップ
BiND標準の画像パーツはSVG形式に対応していませんので、代わりにカスタムタグを使用します。
1.SVG画像を表示したいところにカスタムタグパーツを挿入します。
2.SVGファイルは画像ですが、テキストエディタで開くとソースが表示されます。そのソースを丸ごとコピーします。
3.コピーしたソースをカスタムタグのHTMLソースエディタにそのまま貼り付けます。
カスタムタグが挿入できたら適用してください。
プレビューしてSVG画像が表示されていれば完成です。
POINT
- SVG形式の画像は高解像度でもきれいに表示される
- SVGファイルをテキストエディタで開くとソースが表示される
- BiNDのカスタムタグを使用してSVGファイルのソースを貼り付ける