svgの覚書です。
Contents
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の書き出しのサイズ
僕も等倍派です！
— PENGIN LLC.| Web制作会社 (@pengin_company) March 17, 2021
今はSVGも普及し、jpg・pngもスマートオブジェクトに変換・2倍サイズで書き出しすれば問題ないため、2倍サイズで作るメリットなくない？？
と思っているのですが、歴史的な経緯・背景には疎いためシナカフェメンバーの見解は気になるところです👀
（ホンマさんの解説聞きたい🙈）
SVGは等倍で書き出すことにしています。調整がめんどいからです。
グラフィックソフトからエクスポートします。
Adobeイラストレーターや買い切りのクリスタ、affinity designerがあります。
VsCodeの作業
VsCodeで開いてfillのコードを削ります。
先ほどのrectのコードをグラデーションのコードに差し替え、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">
コメント