※この記事はずいぶん前になんかのために書き起こしたものです。若干途中気味
WebページでSVGを使う機会が2回あり、2回とも同じところで躓いたのその辺のメモです。
SVGとは
今まで私も割となぁなぁで使っていたので、SVGとはなんぞや、からスタートしてしまいました。
SVGとはScalable Vector Graphicsの略語で、数値をデータとして所持しており、これを演算して画像として再現する方式の画像ファイルです。 いいところとしては、演算して画像を作成しているため、サイズを大きくすると画質がわるくなる、といったことはありません。 一方で、演算して画像を作成しているため、複雑な計算式になるとfileが膨らんでしまいます。
ロゴなどのサイズを変更して利用することの多い画像に適した形式です。
ファイル自体はXMLに準拠しているので、テキストエディタでの編集が可能なところも特徴です。(これは初めて知ったなぁ…XML勉強しないとか…?)
インラインSVG
HTMLないに <svg>タグを用いて直接記述されたSVGのことをインラインSVGといいます。
躓いたこと
ただのSVGをCSSの color で色変更しようとした(インラインのみの機能)
頻繁に手を入れる可能性の高いコードであり、手を入れるのがエンジニアとは限らないため、インラインSVGにすると、コードの視認性が悪くなり編集しにくいので、インラインにできない。という諸事情があった
状態としては、外部にSVG拡張子で置いたデータを <img> タグで呼び出している。これだとCSSで color も fill も利用できず、画像の色変更ができませんでした、
解決策
CSSで filter を利用し、画像をフィルタリングすることで対応しました。
疑問点
- インラインSVG出ないとできないことのピックアップ