ショップロゴをSVGで出力するチュートリアル

美しく軽量に。アクセシビリティにも対応したSVGロゴを実装

Shopifyのショップロゴは、ほとんどのテーマがカスタマイザーで画像をアップロードする仕様です。

srcset属性でRetina対応しているとはいえ、オリジナルのPNG画像を縮小して出力するので、縮小ボケが気になる方も多いはず。

最低限のスキルとここで紹介する知識さえあれば、あなたのショップでもアクセシビリティやカスタマイザーに対応した、美しく軽量なSVGのショップロゴが実装できます。