HTML・CSSでSVG画像の使い方
SVG画像とは
SVG（Scalable Vector Graphicsの略）とは、XMLで書かれたベクター画像のファイル形式です。
SVG画像は拡大・縮小しても画質が低下しないため、
最近ではイラスト・Webサイト・グラフで表示する場合によく使用されいます。
svg画像を使用するメリット
- 拡大・縮小しても画質が低下しない（平面的なイラスト・グラフ・ログなどに向いている）
- アニメーションなどに使いやすい
- 直接記述することにより色を変えることができる
- ファイルサイズが小さい
svg画像を使用するデメリット
- 写真のような複雑なカラーを表現できない
HTMLで使用する場合
imgタグで記述する方法
<img src ="sample.svg" alt="sample SVG画像"/>objectタグで記述する方法
<object data="sample.svg" width="150" height="150"> </object>インラインでsvg画像を使用する方法
<svg> </svg>
SVGの色をCSSで設定したい場合
background-imageで記述手順
SVG画像をエディターで開き、下記矢印のSVG画像のようなコードが表示されます。
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg><svg>から </svg> までをコピーし、
変換ツールでエンコードさせます。変換後、記号や日本語などはエンコードされます。
その際、<,>,=,:,”,などは変換されますが、
「+」が変換されいませんので要注意、コードから「+」をすべて選択して「%20」に書き換えてください。
background-image: url(data:image/svg+xml;charset=utf8,ここに追加)変換した例はこちら
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cpath%20d%3D%22M6%2012H18M18%2012L13%207M18%2012L13%2017%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0D%0A%3C%2Fsvg%3E);表示されない場合
width・hieghtの指定やbackground-sizeの設定を見直してみてください。
