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

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

そこで、BiNDupでサイトを作る際に、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画像が表示されていれば完成です。

いますぐBiNDupを無料で使ってみる

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

今すぐ資料をダウンロード
  • POINT

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

あわせて読みたい