svg fillの色変更/グラデーション/アニメーション/はみ出る対策

svgの覚書です。

1 svg fillの塗りつぶしで色を変えたい
2 svg fillのグラデーション
- 2.1 svg fillのグラデーションでテキストが画面外にはみ出る
3 svg fillのグラデーションのアニメーション
4 svg fillのイラストのアニメーション
- 4.1 svgの書き出しのサイズ
- 4.2 VsCodeの作業
5 svgの参考資料
- 5.1 viewBOXの参考資料
- 5.2 グラデーションの参考資料

svg fillの塗りつぶしで色を変えたい

基礎中の基礎として色を変えたいときはimgで呼び出してはダメです。

<img src="./logo.svg"  alt="">

svgを埋め込まないと色は変更できません。VsCodeで開いてコピペでsvgの部分をhtmlに挿入する形です。

<svg>
</svg>

svg fillのグラデーション

svg fillのグラデーションはCSS側に指定しません。fillを使ってlineargradientのidを参照する形です。

<svg width="100%" height="100%">
    <defs>
        <lineargradient id="svgGradient" gradientTransform="rotate(45)">
        <stop offset="5%"  stop-color="gold" />
        <stop offset="95%" stop-color="cyan" />
        </lineargradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url('#svgGradient')"></rect>
</svg>

svg fillのグラデーションでテキストが画面外にはみ出る

rectの図形からテキストに置き換えてみました。しかし、画面外にでてしまいました。

<text class="svg-text" fill="url('#svgGradient')">テキスト</text>

テキストの幅と高さを調べます。

次に幅と高さとviewBoxをそのまま指定します。

<svg width="96px" height="36px" viewBox="0 0 90 36">
</svg>

イラストの場合も同様で巨大なものを縮小する場合はサイズを調べてviewBoxに入れればOKです。

<svg width="100%" height="100%" viewBox="0 0 900 900">
</svg>

しかし、テキストの場合はこれだけではまだ画面外にでます。

次の2つが設定されていないと画面外に切れてしまいます。

まず、xとyの50%の指定。

<text x="50%" y="50%" class="svg-text" fill="url('#svgGradient')">テキスト</text>

もうひとつはテキストの中央合わせです。

.svg-text {
  font-size: 24px;
  font-weight: 900;
  dominant-baseline: middle;
  text-anchor: middle;
}

グラデーションの参照方法は一緒です。ただ、文字の場合は次のように指定した方がよい模様。

<lineargradient id="svgGradient" x1="50%" y1="0%" x2="50%" y2="100%" gradientTransform="rotate(45)">
    <!-- <lineargradient id="svgGradient" gradientTransform="rotate(45)"> -->
        <stop offset="5%"  stop-color="gold">
        </stop>
        <stop offset="95%" stop-color="cyan">
        </stop>
    </lineargradient>
</defs>

svg fillのグラデーションのアニメーション

<lineargradient id="svgGradient" gradientTransform="rotate(45)">
    <stop offset="5%"  stop-color="gold">
        <animate attributeName="stop-color" values="gold;cyan;gold" dur="1s" repeatCount="indefinite"></animate>
    </stop>
    <stop offset="95%" stop-color="cyan">
        <animate attributeName="stop-color" values="cyan;gold;cyan" dur="1s" repeatCount="indefinite"></animate>
    </stop>
</lineargradient>

animateを追加します。各々の意味は次のとおりです。

attributeName	アニメーション対象の属性
values	値	色変更の場合、色をカンマ区切りで入れればOKのようです
dur	アニメーション時間(1ループ)
repeatCount	リピート回数	0以上、indefiniteは固定じゃないという意味なので制限なし

svg fillのイラストのアニメーション

svgの書き出しのサイズ

僕も等倍派です！
今はSVGも普及し、jpg・pngもスマートオブジェクトに変換・2倍サイズで書き出しすれば問題ないため、2倍サイズで作るメリットなくない？？

と思っているのですが、歴史的な経緯・背景には疎いためシナカフェメンバーの見解は気になるところです👀
（ホンマさんの解説聞きたい🙈）
— PENGIN LLC.| Web制作会社 (@pengin_company) March 17, 2021