SVGコード、読み方（構成を知る）。
〽️SVG・xml、ハードル低し。 〽️SVGコードを書き出してみる。 〽️全体の構成。 〽️描画タグ。 〽️スタイルを直接記述。 〽️gタグが便利！ 〽️まづはこれでOK。
SVGアニメーション、作り方。
CSSアニメーション、作り方。
⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。
SVG・xml、ハードル低し。
こんにちは、「ふ」です。
xml形式のSVGファイルをHTML上で扱う・・などと聞くと、ハードルが高く感じる方もいるかもしれません。
「SVG？コンピュータグラフィックなんかできねえぞ！」
「HTMLはわかるけど、xml？新しい言語か・・習得が面倒くさそう💧」
こんなところでしょうか。
しかしsvgはれっきとしたHTMLの要素の１つ。新しいタグを覚えるような感覚で、すんなり入っていけます。
そしてxmlファイルはHTMLと同じマークアップ言語で、かなり近い親戚関係にあります。例えばこれ⬇︎が正方形を描いたコード。
いかがですか？普段目にするHTMLコードとあまり変わり映えしませんよね ♫
<svg>タグの中に<rect>タグがあります。「rect」は長方形ですね。widthもheightも値は50なので、正方形が描かれるという訳です。
構成がわかれば十分。
全てのSVGコードをテキストエディタ上で0の状態からガリガリ入力して、複雑な画像を描いていくとなると、根本からのちゃんとした知識が必要になってきます。
しかし現状は、イラレなどのCGソフトで視覚的に作成した画像をSVGファイルで書き出し→HTMLに流し込んで表示させるのが主流です。
その場合SVGコードを0から描くことができなくても、コードを見て構成さえ掴むことができれば、画像の細かなエディットが可能となってきます。
当記事では、
これを前提とし、
その際の最低限必要な知識に絞って説明していきます。
これまで「SVGはハードルが高い」と思っていた方もこの記事を見ていただければ「あら簡単」となるはずです。明日にはご自分のサイトにSVG画像が貼られているかもしれません、ふふふ。
SVGコードを書き出してみる。
学習を始めていきましょう。
例として、⬇︎の画像をSVG形式で保存し、テキストエディタで開いてみます。
◼︎ 01.svg
こちらがイラレで書き出したものをテキストエディタで開いたもの。
同じ画像を今度はinkscapeを使って書き出してみました。
単純な図形なのに、膨大なコード量ですね。
このままHTMLの<body>〜</body>に貼っても構わないのですが、可読性も低いので必要な部分だけに絞り込んでみます。
まづ１行目にあるのがxml宣言。「これはxmlファイルですよ」という意味で、HTMLのDOCTYPE宣言にあたります。
SVGファイル単体であれば記述が必要となりますが、HTMLはSVGコードを自動的に認識してくれるので、必要ありません。
他にもタグの中にいろいろな宣言・属性やリンクなどが記述されています。CGソフト側で自動的に指定されているのですね。
コードの構造を見やすくするため、それらも省略していったのが以下のコード。
よく目にするHTMLっぽくなってきましたね。
先ほども述べましたが、svgはHTML要素の１つです。これだけでもブラウザでちゃんと表示されます。次のセクションで内容を見ていきましょう。
全体の構成。
構成を見ていきます。先づは１番外側。
◼︎ svgタグ。
svg要素の最初と終わりを<svg>〜</svg>で囲んでいます。これがsvgタグです。
開始タグにviewBoxという属性が付けられています。可視範囲のサイズを指定しているものです。
CGソフトで画像を作成した時のアートボードのサイズがそのまま反映されるので、特に意識する必要はありません。web上で表示する位置やサイズなどはCSSで指定すれば問題ありませんから。
ただし。画像作成の際はオブジェクトに対して、あまり余白を取らないようにすることをお勧めします。
◼︎ CSS
その理由ですが、CSSでsvg要素に枠線を付けて表示してみます。
CGソフト上でのオブジェクトに対してアートボードが大きすぎると、隣接する要素に対してバカでかい余白ができてしまいます。対処するにはviewBox属性の数値を調整しなければならなくなり、非常にめんどくさい。
SVG書き出し用の画像を作成する時は、なるべくオブジェクトギリギリにアートボードを設定した方が良いですね。
◼︎ スタイルシート。
SVGコードの中にもスタイルシートがあります。次に紹介する描画タグの中にスタイル属性を記述することもできますが、共通する線の色などをclassセレクタで選択してまとめて指定するには便利ですね。
そして「fill」などの見慣れないプロパティが。これはSVG独自のプロパティです。
stroke : 線の色
stroke-width : 線の幅
ひとまづこの３つを知っておけば大丈夫です。
扨（さて）次は描画タグを見ていきましょう。
描画タグ。
肝心のオブジェクトを描画している部分です。
CGソフトで作ったオブジェクトが１つ１つ、タグで書かれていますね。画像を参照しながら見ていきましょう。
SVGには長方形や楕円など、お決まりの図形を描画するためのタグが存在します。コードのはじめに書かれているのは長方形（rect）タグです。その下にあるのは楕円（circle）タグ。
rectの部分を例に、タグの内容（属性）を見てみましょう。
xとyは、描画位置を座標で示しています。
そのあとに先ほどのスタイルシートでセレクトするためのclass属性が続きます。
widthとheightはまんま、幅と高さです。
お決まりの図形を描画するタグは他にも用意されています。
長方形 <rect />
楕円 <circle />
多角形 <polygon />
折れ線 <polyline />
このようなものが挙げられます。
ところで、svgの描画タグを記述する際には閉じタグは必要ない代わりに、「>」の前にスラッシュ「/」を付けなければなりません。これはもともと、xml言語の記述ルールです。HTMLのsvg要素の記述にもそのまま採用されているんですね。
◼︎ 書き順が重ね順。
描画タグは後に記述したものが前面に描画されます。現在画像では黄色の円が前面に、緑の正方形が背面になっていますね。
svg要素内のタグの順番を入れ替えてみましょう。
長方形タグの記述を後ろに持ってきたため、画像上でも長方形が前面になりました。
〜記述順と重なり順の法則を、逆に見なければいけなく、ややこしいところではありますね💧
◼︎ path要素。
お決まり図形の後に記述されているのが、「path」タグです。画像では円と正方形の右に描画されているのが、それです。
path要素はペジェ曲線を使って自由自在に線を描くことができます。ということは、先ほど挙げたお決まり図形もすべて、path要素で描くことに成増。
タグ内の属性を見てみましょう。
１つ目はclass属性。そのあとの「d」というのは、パスの軌跡を記述する「data」属性です。Mやらcやらアルファベットも混じっていて、覚えるのが大変そうですね・・
数値は気にしない。
〜今回「SVGをHTML上で操作する」ための知識についてお伝えしていますが、「ふ」が1番お伝えしたかったこと。お決まり図形の位置やサイズ、はたまたpath要素のdata属性などには複雑な数値が並んでいます。例にあげている単純な画像でもこれだけの量。ましてや本格的なロゴデザインとなると、ものすごい量になるのでは・・と心配されるかと思います。が、
座標や数値を気にする必要はありません。
CGソフト上でいくらでも調整できるから。
SVGコードを見て、どのタグがどのオブジェクトを描いているか、その構造が把握できればいいんです。それさえできれば、HTML上でSVGを編集したりアニメーションさせたりすることは十分に可能です。
スタイルを直接記述。
先ほども書きましたが、描画タグの中にスタイル属性を記述することができます。ただそのとき、通常のHTML要素の場合と違う点があるので、押さえておきましょう。
その違いは、fill（塗り潰しの色）やstroke（線の色）などのプロパティを、独立した属性で指定できる、ということです。どういうことなのか。
通常のHTML要素でテキストの色などのプロパティをタグ内で指定する際には、
といった感じでスタイル属性のクオテーション内部にプロパティと値を記述します。一方でSVGの描画要素の場合、
このように個別のプロパティをそのまま属性指定として記述することができます。通常のCSSのようにコロン（：）でプロパティと値を繋げるのではなく、属性指定となるのでイコール（＝）で繋げているところにも注意してください。
そして通常通りの記述でもちゃんと反映されます。
ただCGソフトからSVGを書き出した場合は前者の形式でエディタに表示されるため、見慣れておいたほうが良いかと。
ちなみにsvg内部のスタイルシートに同一のプロパティ指定があった場合。
①の記述法だと、スタイルシートの値が優先されます。
②の記述法だと、タグ内の値が優先されます。
〜オブジェクトのスタイル指定については様々なケースが考えられるので、いずれまとめて記事にしたいと思います。
gタグが便利！
svgコードの構成が理解できたところで、実際にCSSを使って操作してみましょう。
画像のオブジェクトの色などを変更してみます。
先ほど紹介したsvg要素内のスタイルシートでエディットするのもいいのですが、HTMLのヘッダ部分のCSSを使ったほうが
svg以外の要素とまとめて認識できるのと、svgコード自体使い回し（汎用）できるので便利です。
正方形の塗り潰しの色を変えてみましょう。CSSで参照させるべく、rectタグの中にid属性を追加します。
◼︎ CSS
HTMLのhead内にあるCSSに記述しました。svg独自の「fill」や「stroke」などのスタイルプロパティも、CSSは認識してくれるのです。嬉しいですね。
正方形の塗りつぶしの色を変更することができました。
◼︎ divの代わりにg。
通常のHTML要素で、部分的にstyleを指定したいとき、その部分を<div>〜</div>で囲んでCSSで参照させますよね？
SVG要素においても同様に、部分的なstyleを施したいときがあると思います。
ところがsvg要素内部で<div>〜</div>を使うと、エラーになってしまい画像が表示されません。
そのとき活躍するのが<g>タグ（グループ）の存在です。CGソフト上の「オブジェクトのグループ化」とは別物なので、注意してください。
サンプルのSVG画像には３つのオブジェクトがありますが、曲線と円をグループにしてみます。
<g>要素にはもちろんidやclass属性をつけることができます。
例ではid名を「cp」としました。
これにCSSを施してみます。
◼︎ CSS
opacity（不透明度）を変えてみます。
グループ化した円と曲線にCSSが適用されました。
このようにsvg要素内では<div>の代わりに<g>タグを使って要素を囲んで行くことができます。
<div>と同じく入れ子構造にすることも可能です。
SVGのオブジェクトの１部だけアニメーションさせる、スタイルを変えるといった時にはこの<g>タグは必要不可欠となってくるでしょう、知っておいてください。
ロリポップ！の取次店になりました。
まづはこれでOK。
フーノページではこれまでSVGアニメーションのチュートリアル記事などを発信してきました。ですがSVGやxmlについて、いまいちとっつきにくい印象を持たれている方もいらっしゃるのでは‥と思い、今回は「HTML上でSVGを編集する」ために必要な知識について紹介しました。
是非、ご自分でSVGを書き出してHTMLに取り込んでみてください。何度も言いますが、SVGやxml全ての知識は必要ありません。コードを見て、「どのタグがどのオブジェクトを指しているか」が確認できれば、十分にHTML内でSVGの操作が可能です。
今回の内容は最小限に絞るように心掛けたのですが、結構な長さになってしまいましたね、すいません。
反対に、もう少し詳しく知りたい方もいらっしゃるかもしれません。今回紹介した以外のちょっと特殊な要素やタグについて、また記事にさせていただきたいと思っています。ではまた〜 ♫
関連記事
Vectornator、SVGを書き出してwebに配置。
SVGアニメーション02、画像を宙に浮かべる。
2020.05.22
〽️ 要素を変形させるtransformプロパティ。
SVGアニメーション06、アニメーションに合わせてテキストの色を反転。
2020.07.15
〽️ ３つの長方形を動かします。
SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。
2020.07.06
〽️ テキストの内部だけアニメーション。
「ふ」です。
ベクターグラフィックをはじめ、swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。