SVGをCSSで編集。
〽️ CSSで汎用性を持たせたい。 〽️ SVGコードをインラインで記述。 〽️ 色を変えてみる。 〽️ 不透明度を変える。 〽️ 結果、用途が広がりまくります。
SVGアニメーション 作り方。
⬆︎SVGついてのまとめページはこちら。
CSSで汎用性を持たせたい。
fu.svg
こんにちは、「ふ」です。
webサイトに貼ってもぼやけずくっきり、ベクター画像のSVGファイル、便利ですよね。
これまでは同一フォルダ内にHTMLドキュメントとSVGファイルを置き、次のように呼び出していました。
HTML
これだと画像サイズや背景色はCSSで指定できるのですが、パス自体の塗り潰しの色を変えたりすることはできません。
すべてfu.svg
もし１つのSVGファイルで色違いのバリエーションをつけたり、状態によって透明度を変えたりすることができればとても汎用性が高まりますよね。
よし、今回はSVGファイルをCSSで操作する方法に挑戦してみましょう。
SVGコードをインラインで記述。
◼︎SVGファイルをCSSで操作できるようにするためには、HTMLファイルにSVGのコードを直接書き込む必要があります。
SVGファイルをテキストエディタで開いてコードをコピー。htmlの <body>〜</body>に流し込みます。
ブラウザ
ブラウザで表示できました。
HTML
イラレなどで書き出したSVGファイルであればレイヤー毎にidが付けられています。もし<svg>タグのところに表記が無い場合には、CSSでセレクトできるようにidやclass名をつけておきましょう。
色を変えてみる。
◼︎SVGの編集をするには、普段のCSSで使っているものとは別にSVG専用のプロパティを使う必要があります。
まづはパスの塗り潰しの色を指定してみましょう。塗り潰しのプロパティは「fill」で指定します。
CSS
ブラウザ
おお、できましたよ。では線の色も変えてみます。
SVGオブジェクトのアウトライン（線）のプロパティは、「stroke」、太さは「stroke-width」で指定します。
ブラウザ
いい感じです。元のSVG画像からかなり変化しましたね。
不透明度を変える。
不透明度のプロパティは「opacity」。値は0.0〜1.0の範囲で指定します。
ブラウザ
うまくぼやけました。
これ、アニメーションを仕込めそうですね！
結果、用途が広がりまくります。
今回はSVGファイルのプロパティをCSSで操作できるようになりました。その結果・・
やりたいことがいっぱい出てきた！
ユーザの操作に合わせてボタンの色を変えたり、ヘッダーロゴにアニメーションを加えたり〜試したいことがいっぱい出てきて妄想が止まりませんね！しかもベクター画像なのでぼやけることなくくっきり表示されます。
扨（さて）、忙しくなるぞ！
今回はごく簡単な編集のみ紹介しました。
もっとSVGファイルのプロパティを調べて、さらにはJavaScriptも仕込めば、webページが一気に楽しいものになりそうです。
関連記事
SVG、オブジェクト単位でCSSを適用させる。
SVGアニメーション02、画像を宙に浮かべる。
2020.05.22
〽️ 要素を変形させるtransformプロパティ。
iPadでSVGデータを作成、
SVG画像に影を落とす。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧