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

2025年2月13日

svgの覚書です。

Contents

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 グラデーションの参考資料
6 SVGのファイル加工
7 SVGのトラブル
- 7.1 affinity designerのカーブの色を変更できない
- 7.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

SVGは等倍で書き出すことにしています。調整がめんどいからです。

グラフィックソフトからエクスポートします。

Adobeイラストレーターや買い切りのクリスタ、affinity designerがあります。

ER Game Design

値上げ!Adobeプラチナスクールパートナーの通信講座比較！ Adobe製品を安く買う方法まとめです。 Adobeプラチナスクールパートナーの通信講座が値上げ?【速報】残念ながら2024年12月1日（日）から値上げされます。ヾ(｡・ω・)ﾉﾟ　...

ER Game Design

クリスタを安く買う!買い切りのセールはいつで頻度は!?割引は? CLIP STUDIO PAINT ProとEXは公式サイトが最安値です。クリスタを安く買う!買い切りのセールはいつで頻度は!?割引は? クリスタの過去セールは!? クリスタはあまりセールを...

ebookbrain

Affinity Designer v2(アフィニティデザイナー)の書き出し(エクスポート)(ai/eps/svg/psd/png/pdf/互換性) Affinity Designerの書き出しの覚書です。Mac版のuiは書き出しなのですが、Windowsのuiはエクスポートです(両方持ちです)。翻訳が違う!?。。ため、そこは補完して読んでく...

VsCodeの作業

VsCodeで開いてfillのコードを削ります。

先ほどのreactのコードをグラデーションのコードに差し替え、fill=”url(‘#svgGradient’)”をつければ終了です。

svgの参考資料

viewBOXの参考資料

SVGのviewBOXについて。

【SVG】描画領域と座標指定 https://t.co/HIxwNHcZm2 #SVG
— b1san’s blog (@b1san_blog) August 25, 2021

viewBOXは表示領域のことです。

移動アニメーションをしない場合は、幅と高さを100%にして等倍で使う場合が多いように思えます。ただ、VieｗBoxの値を数倍にした場合はこのあたりの理解が必要です。

グラデーションの参考資料

グラデーションは最初、この動画がわかりやすかったです。

ありがとうございます。

SVGのファイル加工

Affinity DesignerでエクスポートされるSVGよりも、Twitter (X)で配布されているSVGがシンプルだったのです。その差分を削除してもいいのかテストしました。

下記はAIのClaude君の回答ですが、削除しても問題なさそうだったので消しました。

xmlns:xlink="http://www.w3.org/1999/xlink": 古いSVG仕様で使用されていましたが、SVG 2では非推奨となっています。 xml:space="preserve": テキスト要素の空白を保持するために使用されますが、このSVGには関係ありません。 xmlns:serif="http://www.serif.com/": Serif DrawPlus等の特定のソフトウェアで生成されたSVGに含まれることがありますが、一般的なWeb使用では不要です。 style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;": これらのスタイルは、この特定のSVGには影響を与えていないため、削除可能です。

<svg width="100%" height="100%" viewBox="0 0 101 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">

↓変更

<svg width="100%" height="100%" viewBox="0 0 101 74" version="1.1" xmlns="http://www.w3.org/2000/svg">

SVGのトラブル

affinity designerのカーブの色を変更できない

Affinity Designer のブラシ機能は、筆の質感を表現するために、線の上にテクスチャとして PNG 画像を重ね合わせているようです。

pathはアタリの線です。gの部分がブラシです。xlink:href=”#_Image3″で参照していることがわかります。

<g transform="matrix(1,0,-6.84228e-49,1,-34.1973,-102.861)">
    <path d="M1375.7,706.861C1550.58,706.861 1598.96,710.239 1624.07,710.823"/>
    <g transform="matrix(1,-0,6.84228e-49,1,424.197,570.861)">
        <use xlink:href="#_Image3" x="943.479" y="130.979" width="258px" height="12px"/>
    </g>
</g>
(中略)
<defs>
    <image id="_Image3" width="258px" height="12px" xlink:href="data:image/png;base64,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"/>
</defs>

この問題はAffinity Designerのブラシ機能を使わないことですかね。

角丸などの一部の形状が再現できない

同じsvgを配置していたい際に、clipPathがユニークな値ではないため、そのような症状が発生したことがありました。

<g transform="matrix(0.598613,0,0,1.01623,868.661,130.792)">
    <!-- clipPath の ID を固有のものに変更 -->
    <clipPath id="_clip1-sidebar">
        <path d="M723.904,356.012C723.904,342.662 705.504,331.823 682.841,331.823L173.601,331.823C150.937,331.823 132.537,342.662 132.537,356.012L132.537,504.441C132.537,517.791 150.937,528.629 173.601,528.629L682.841,528.629C705.504,528.629 723.904,517.791 723.904,504.441L723.904,356.012Z"/>
    </clipPath>
    <!-- clip-path 属性の参照を変更 -->
    <g clip-path="url(#_clip1-sidebar)">
        <g transform="matrix(1.67053,-0,-0,0.984031,-799.617,331.823)">
        <use xlink:href="#_Image2" x="558" y="0" width="354px" height="200px"/>
        </g>
    </g>
</g>

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

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

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

svg fillのグラデーション

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

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

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

svgの書き出しのサイズ

VsCodeの作業

svgの参考資料

viewBOXの参考資料

グラデーションの参考資料

SVGのファイル加工

SVGのトラブル

affinity designerのカーブの色を変更できない

角丸などの一部の形状が再現できない

コメント

コメントするコメントをキャンセル

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

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

svg fillのグラデーション

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

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

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

svgの書き出しのサイズ

VsCodeの作業

svgの参考資料

viewBOXの参考資料

グラデーションの参考資料

SVGのファイル加工

SVGのトラブル

affinity designerのカーブの色を変更できない

角丸などの一部の形状が再現できない

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル