SVGファイルにXMLコードでグラデーションをかける方法

Illustratorなどを使ってグラデーションで塗りつぶした画像をSVGで書き出すと、グラデーションの部分がラスタライズされて保存されてしまいます。

せっかくSVGファイルで保存したのにビットマップで表示されていたらちょっと気になりますよね。

というわけで、今回はXMLコードでSVGファイルにグラデーションをかける方法を紹介します。

 

defsタグを使用

グラデーションやパターンなどをSVGの素材として定義するdefsタグを使ってグラデーションをかけます。

これにlinear-gradientなどを使えばグラデーションをかけることができます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" stop-color="white" />
            <stop offset="100%" stop-color="black" />
        </linearGradient>
    </defs>
        <path fill="url(#gradient)" d="(略)" />
</svg>

 

idを指定し、url(#ID名)でfillと紐付けしましょう。