CSSブレンドモードとSVGを使用して、商品の色を動的に変更する方法
この記事ではSVGデータを作成し、CSSブレンドモードを適用させることで、商品の配色を動的に変更する方法をご紹介し...
- CSS
- HTML
- JavaScript
SVG(エスブイジー)は、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略称で、画像のデータ形式の一種です。
1998年に誕生し、比較的歴史の長いデータ形式です。これまでは対応するブラウザが少なく、近年ようやく普及が進んできました。
画像のデータ形式は、JPEGやPNGが有名です。SVGの特徴は、そのふたつと違いXML言語を元にしたベクター形式であるという点です。ベクター形式とは、数値演算を元に作られた画像データのこと。数値で構成されたデータであるため、拡大や縮小に強くどのような画面でも綺麗な画質で画像を表示します。
PCやスマートフォンのレスポンシブデザインが主流となっていますが、どのような画面でも対応するSVGの画像は近年多用されています。またXMLをベースにしているため、テキストエディタで画像編集が可能です。
一方で、複雑な数値演算で構成されているSVGは、写真や絵画といった繊細な配色や線画の再現には向いておらず、ピクセルを組み合わせたラスタ形式のJPEGやPNGに分があります。そのような特徴から、SVGはロゴや文字デザインなどによく使われます。
・Adobe Photoshop
・イラストレーター
・PSD
・画像圧縮
・画像編集