ブログBlog
svgをcssにbackgroundに設定出来る
投稿日：2019年05月27日
こんにちは。山根です。
今回は仕事をしながら見つけたsvgをcssにbackground-imageに設置する方法を紹介致します。
そもそもsvgとはどういうものなのか。
「ベクトル形式」で描画されるSVGファイルは、パスやテキスト、シェイプなどの集合を画像として扱うため、拡大や縮小をしても画質が劣化しません。近年主流となっているレスポンシブデザインと相性がよく、PCで見てもSPで見ても変わらない画質で表示させることが可能です。
画像ファイルを置いておかなくても良いのでコードのファイル管理だけで済ませることが出来ます。
では方法をご紹介致します。
svgを今回はライセンスをとらなくても大丈夫なgoogleのIcons – Material Designのアイコンで説明していきます。
https://material.io/tools/icons
- 1Icons – Material Designのアイコンをダウンロード
- 2メモ帳に貼り付けるとコードが出てきます。
- <svg xmlns=”http://www.w3.org/2000/svg” width=”24″ height=”24″ viewBox=”0 0 24 24″>
<path d=”M0 0h24v24H0z” fill=”none”/>
<path d=”M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z”/>
</svg> - 3この時heightの後にfillでカラーを指定します。
- <svg xmlns=”http://www.w3.org/2000/svg” width=”24″ height=”24″ fill=”#cccccc” viewBox=”0 0 24 24″>
<path d=”M0 0h24v24H0z” fill=”none”/>
<path d=”M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z”/>
</svg> - 4svgを保存してData URI Scheme 変換に貼り付けます
- https://xxxx.html
- 5cssでbackground-imageとして貼り付けます。
- background-image: url(…)
以上svgをcssに載せるやり方です。
続きまして定番の写真です。
5月に見頃を迎える藤を撮って参りました。
写真の撮影の仕方もまだまだ学ぶべき点が多くあるのでまだ紹介は出来ませんがいつか紹介できたらなと思います。