すべてのカテゴリ

Web制作をしていると、「SVGって結局何ができるの？」と疑問に思うことがあります。PNGやJPEGと違って、SVGはただの画像ではありません。正しく理解すると、表現の幅もパフォーマンスも一気に変わります。この記事では、SVGで実現できることを具体的に整理します。SVGとは何かSVG（Scalable Vector Graphics）は、画像ではなく「コードで描かれた図形」です。そのため、拡大しても劣化せず、CSSやJavaScriptで操作できるという特徴があります。① 劣化しない画像表現SVGの最大の強みはここです。・どれだけ拡大してもボケない・Retinaディスプレイでもくっきり表示される・レスポンシブでも綺麗に保てるロゴやアイコンにSVGが使われる理由はこれです。② CSSでデザインを変更できるSVGはHTMLの一部として扱えるので、CSSが効きます。・色の変更（fill / stroke）・ホバー時のアニメーション・サイズの調整つまり「画像なのにスタイルを後から変えられる」という状態になります。PNGだとこれは不可能です。③ アニメーションができるSVGはかなり自由に動かせます。・線が描かれるようなアニメーション・ローディングスピナー・アイコンの変形CSSでもJSでも制御可能なので、表現の幅が広いです。ただし、ここでよく勘違いされるポイントがあります。「SVG＝1枚の画像」として書き出した場合は細かい制御はできません。パス（path）単位で分かれていることが重要です。④ JavaScriptで操作できるSVGはDOMとして扱えるため、JavaScriptで直接操作でき

今制作中のウェブサイトは、WordPressのテーマのSWELLを使っています。今回、メインビジュアルに、SVG画像を使ったアニメーションを設置できました。また機能追加も、プラグインを作る方法で行っていますので、テーマの更新の影響を少なくできるように配慮して制作しています。子テーマを活用することで、親テーマの更新があっても、影響を受けにくいです。SWELL以外にもCOCOONなどでも、制作できます。WordPress以外のCMS、例えばSTUDIOでも、ウェブサイトを制作した経験があります。ウェブサイトの制作でお困りの方は、お気軽にご相談くださいませ。ご自身でバナーなどを作りたいなど、完全に私に制作を任せるのではなく、デザインの作成やバナーの作成などをお客様で対応される場合は、安価に見積しています。お気軽に、ご相談くださいませ。