とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

webサイトにSVGを表示する方法。SVGタグコードはIllustratorからコピペでOK

webサイトにSVGを表示する方法。SVGタグコードはIllustratorからコピペでOK

webサイトにSVGを掲載する方法は、

  • svgファイルとして掲載
  • svgタグとして掲載

の2パターンがあります。

 

SVGの取り扱いに参考になるサイト

 

今回は「svgタグとして掲載」する簡単な方法を紹介します。

 

イラストレーターでオブジェクトをコピーすると

SVGコードとしてコピーできます。

エディタなどにそのままペーストすると

SVGコードが出力できます。

 

イラストレータからコピペするだけでSVGが使えることを知りました。 – megane9988のブログ

 

https://image.slidesharecdn.com/afterdark17-kitamura-141219034929-conversion-gate01/95/cpi-x-css-nite-x-after-dark17-illustratorsvg-25-638.jpg?cb=1418961203

CPI x CSS Nite x 優クリエイト「After Dark」(17) 「Illustratorでサクサク作るSVG」

 

めっちゃ便利。

imgタグでSVGを掲載するとファイル容量が

大きくなることがあるのですが、このコードは

行ってしまえばただのソースコードでテキストファイル

を変わらないため、容量はほとんど食わない形になります。

 

SVGコードで掲載する場合のデメリットは、

ソースコードを見てもなんのファイルか

目視ではわからないところと、ソースコードの

可読性が少し悪くなるくらい。

 

使いドコロさえおさえておけば、

有用な方法です。