SVGをCSSで編集。

〽️ CSSで汎用性を持たせたい。 〽️ SVGコードをインラインで記述。 〽️ 色を変えてみる。 〽️ 不透明度を変える。 〽️ 結果、用途が広がりまくります。








CSSで汎用性を持たせたい。




fu.svg

こんにちは、「ふ」です。
webサイトに貼ってもぼやけずくっきり、ベクター画像のSVGファイル、便利ですよね。

これまでは同一フォルダ内にHTMLドキュメントとSVGファイルを置き、次のように呼び出していました。

HTML

これだと画像サイズや背景色はCSSで指定できるのですが、パス自体の塗り潰しの色を変えたりすることはできません。




すべてfu.svg

もし1つのSVGファイルで色違いのバリエーションをつけたり、状態によって透明度を変えたりすることができればとても汎用性が高まりますよね。

よし、今回はSVGファイルをCSSで操作する方法に挑戦してみましょう。



SVGコードをインラインで記述。

◼︎SVGファイルをCSSで操作できるようにするためには、HTMLファイルにSVGのコードを直接書き込む必要があります。

SVGファイルをテキストエディタで開いてコードをコピー。htmlの <body>〜</body>に流し込みます。




ブラウザ

ブラウザで表示できました。




HTML

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" 「「1id="text"」」 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 357.3 262.7" style="enable-background:new 0 0 357.3 262.7;" xml:space="preserve"> 「「3〜 略 〜」」

イラレなどで書き出したSVGファイルであればレイヤー毎にidが付けられています。もし<svg>タグのところに表記が無い場合には、CSSでセレクトできるようにidやclass名をつけておきましょう。






 

色を変えてみる。

◼︎SVGの編集をするには、普段のCSSで使っているものとは別にSVG専用のプロパティを使う必要があります。


まづはパスの塗り潰しの色を指定してみましょう。塗り潰しのプロパティは「fill」で指定します。

CSS

#text { 「「1fill:blue;」」 }

ブラウザ

おお、できましたよ。では線の色も変えてみます。


SVGオブジェクトのアウトライン(線)のプロパティは、「stroke」、太さは「stroke-width」で指定します。

#text { fill:blue; 「「1stroke:gray; stroke-width:5px;」」 }

ブラウザ

いい感じです。元のSVG画像からかなり変化しましたね。







不透明度を変える。

不透明度のプロパティは「opacity」。値は0.0〜1.0の範囲で指定します。

#text { fill:blue; stroke:gray; stroke-width:5px; 「「1opacity:0.3;」」 }

ブラウザ

うまくぼやけました。
これ、アニメーションを仕込めそうですね!






結果、用途が広がりまくります。

今回はSVGファイルのプロパティをCSSで操作できるようになりました。その結果・・



やりたいことがいっぱい出てきた!

ユーザの操作に合わせてボタンの色を変えたり、ヘッダーロゴにアニメーションを加えたり〜試したいことがいっぱい出てきて妄想が止まりませんね!しかもベクター画像なのでぼやけることなくくっきり表示されます。






扨(さて)、忙しくなるぞ!

今回はごく簡単な編集のみ紹介しました。
もっとSVGファイルのプロパティを調べて、さらにはJavaScriptも仕込めば、webページが一気に楽しいものになりそうです。



関連記事











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧