SVGにCSSやJSを組み込んでローディングアニメーションを作成する！ | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]

こんにちは！SDの開発担当のさいとーです！ 今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） ここまでは良く目にする特徴かもしれませんが、 SVGはもっと色々なことができます！ この記事では、SVGにCSSやjavascriptを組み込んで「機能を持つSVG画像」を作り、 その機能をHTMLから呼び出す、ということをやっていきたいと思います。 例として、SVG画像でローディングアニメーションを作成してみましょう！ SVGの表示方法 まずはSVG画像の表示方法からご紹介します。 ※SVG画像