簡単な図形を描きながら、SVGの基本的な仕組みを理解してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。はっちゃんです。 みなさんSVGは使っていますか？ 文字やボタンの淵をアニメーションしながら描くような、ちょっとした表現にも効果的だったり、拡大・縮小しても画質が劣化しないため、最近ではロゴやアイコンに使用するケースも多いですよね。 今回は、簡単な図形を自分で描いてみて、SVGの基本的な仕組みを理解していこうと思います。 SVGとは 見た目は画像と同じ SVGで描画した情報は、SVG形式の画像として認識されます。 アニメーションさせることができる SVGタグは、通常のHTMLタグと同じようにDOMオブジェクトとして管理されるので、javascriptで動的に書き換えることでアニメーションさせることができます。 サーバーに対する負荷をかけずに、描画することができる 画像のように、サーバーにファイルを置いておく必要がなく、負荷をかけずにクライアント側で動的に生成させることができます