SVGのpaint-order：太い輪郭を文字の塗りの背後に置く
SVGのpaint-orderで太いストロークを塗りの背後に置きます。文字とパスの実際の描画を比較し、小さなサイズを確認して、納品用の編集可能なマスターを保持します。
SVGの文字や形状要素にpaint-order="stroke fill"を設定すると、塗りの前に輪郭を描きます。不透明な塗りはストロークの内側部分を覆うため、太い輪郭が文字の色付きの面へ食い込まなくなります。CSSではpaint-order: stroke fill;とも書けます。
パス、フォントサイズ、ストローク幅は同じままです。ストロークを太くした後、縁取り文字が重く読みにくくなったときに役立つ見た目の設定です。外側に整列したストロークや、新しいカット用輪郭を作るものではありません。
既定の輪郭が文字を狭くする理由
SVGは通常、要素の塗り、ストローク、マーカーの順に描きます。中央配置のストロークは、塗り形状の境界をまたいで広がります。そのストロークを最後に描くと、塗りの一部を覆います。細い文字の軸では、太いストロークが面の色の大部分を隠す場合があります。
最初の2つの操作を逆にすると、重なる部分を塗りが覆います。SVGの描画仕様は順序を定義し、MDNのSVG属性リファレンスは属性とCSSの両方を説明しています。短い値strokeはstroke fill markersと同じ順序です。省略した操作は、通常の相対的な順序で後に続きます。
この効果には見える塗りが必要です。fill="none"のパスには、内側のストロークを覆う塗りがありません。半透明の塗りはストロークを透かす場合があるので、ここで示す結果には不透明な塗りを使います。
同じ画像を2つのサイズで比較する
ライブテキストで短いBOLDのワードマークを作り、小さな三角形のパスのエンブレムを添えました。以下のブラウザー比較は、各組内で描画順序だけを変えています。ストローク幅はSVGユーザー単位の4と8で、同じ400 × 110のviewBoxを幅400と200 CSSピクセルで表示します。
8単位の設定では、通常順序のワードマークの黄色い面が大きく失われます。塗りを最後に描くと、黄色い軸が見えたままになります。200ピクセル版でも効果は分かりますが、小さな穴は狭いままです。エンブレムの小さな内側の穴も、太いストロークでは見分けにくくなります。
この最後の点が重要です。描画順序は文字の面を保持できますが、すべての穴や隙間を読めるようにはしません。ストロークは塗りのない空間へも広がります。想定表示サイズで開口部が閉じるなら、ストロークを細くするか画像を簡略化します。ブラウザーのプレビューを拡大しても、読者が実際に見るサイズの確認の代わりにはなりません。
これらは独自の描画例であり、PerfectVectorの変換結果ではありません。ワードマークはインストール済みのArialとsans-serifの代替を使います。フォントが異なると文字形状と間隔が変わります。
完全なSVGを試す
wordmark.svgとして保存し、ブラウザーで直接開きます。この例は、形状の周囲に見えるストロークのための十分な余裕を残しています。比較用にpaint-orderをnormalへ変え、次にstroke-width="4"を試します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
<g fill="#ffd76a" stroke="#263b55" stroke-width="8"
stroke-linejoin="round" paint-order="stroke fill">
<path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
<text x="78" y="76" font-family="Arial, sans-serif"
font-size="64" font-weight="700">BOLD</text>
</g>
</svg>グループは描画プロパティをパスと文字へ渡します。各子は、自身の描画に指定した順序を使います。fill-rule="evenodd"がエンブレムの内側の穴を作ります。描画順序とは独立した設定です。
小さい例を再現するには、viewBoxを変えずにwidthとheightを200と55へ変えます。このファイルには拡大縮小しないストロークがないため、画像とストロークは一緒に拡大縮小されます。8単位のストロークは、半分の表示への対応付けで4 CSSピクセルになり、その後さらに塗りで一部が隠れます。
スタイルシートを使う版では、対象にクラスを付けて次を設定します。
.outlined-wordmark {
paint-order: stroke fill;
}プレゼンテーション属性とCSS宣言の両方がプロパティを指定する場合、CSSが優先します。属性を変えても何も起きないようなら、適用された規則を確認します。MDNのCSSリファレンスは、継承と使えるキーワードの組み合わせも説明しています。
この設定が変えないもの
ストロークの整列。 ストロークは同じ中心パスに沿ったままです。一部を塗りで覆うと、塗り領域の外側の枠のように見えますが、ストローク形状を外へ動かしたわけではありません。穴の端では、残った見えるストロークが穴へ食い込む場合があります。
別々のオブジェクトの重なり順。 1つの要素の描画順序を変えても、その要素が隣の形の背後へ移動するわけではありません。後から重なるオブジェクトは、引き続きそれを覆えます。その問題なら、オブジェクトを並べ替えます。例はSVGのz-indexでロゴのパスを並べ替えられない理由を参照してください。
カット用パスやオフセット。 カッターや形状ツールには適した輪郭が必要です。きれいなブラウザーの縁取りを、1つにつながった枠として解釈すると想定できません。納品に必要なら、形状を別途作って確認します。
フォントの移植性。 サンプルにはライブテキストがあります。描画順序を変えてもフォントを同梱したり、字形を固定したりはしません。他の環境で開き直してワードマークが変わるなら、SVGのフォント変更の確認を使います。
編集時は、これらを区別します。paint-orderの変更は簡単に戻せますが、ストロークの展開や文字のパス化は、文書の編集可能な構造を変えます。
対象環境で納品用コピーを確認する
ブラウザーの結果から始め、保存したファイルを使用するアプリやレンダラーで開きます。ブラウザーのプレビューだけでは、エディター、PDF変換ツール、製品の処理が見た目を保持するとは判断できません。
- 最終サイズで面の色と外側の縁を比較します。B、O、エンブレムの細い穴の内部を見ます。
- 期待するフォントが読み込まれたか確認します。字形だけでなく間隔も確認します。
- ページ端を確認します。太いストロークには、ビューポートやクリップ内の余裕が必要な場合があります。
- 書き出した納品ファイルを開き直します。作業文書が正しくても、書き出しでスタイルや構成が変わる場合があります。
対象環境で輪郭が変わるなら、ファイルを塗りとストロークのある1つの形に減らし、ブラウザーと比較します。切れ、倍率、描画の欠落には、SVGストロークが消える問題の診断を使います。色の規則の競合には、SVGの色変更ガイドが、塗りとストロークの定義場所を説明しています。
ライブの見た目が受け渡しで保てない場合は、編集可能なマスターを保持し、必要な見た目を形状にした別の納品用コピーを準備します。そのコピーを目視と形状の両方で検証します。中央配置のストロークを展開するだけでは、意図したすべての重なりを再現したり、1つの外側の輪郭を作ったりはしません。
元データがラスターのロゴの場合
元のベクターエンブレムとライブの文字があれば使います。縁取りを加えるためだけに、正しく表示されている文字のスクリーンショットを撮ってトレースする利点はありません。
残っているエンブレムがPNGやJPGだけなら、PerfectVectorのロゴのベクター化手順で前段階のSVG候補を準備できます。このスタイルを適用する前に、変換した輪郭と小さな穴を確認します。変換は描画順序を設定したり、元のフォントを特定したり、どの形が輪郭を共有するか決めたりはしません。
正しいフォントで文字を再現できる場合は、デザイン中は別のテキストオブジェクトとして保持します。ロゴのベクター化ガイドは、ラスターの復元と既存のベクターマスターのどちらを選ぶか説明しています。
よくある質問
SVGの既定の描画順序は何ですか？
塗り、ストローク、マーカーの順です。normalはこの順序を指定します。
paint-order="stroke"と"stroke fill"は違いますか？ ここでは同じ、ストローク、塗り、マーカーの順になります。指定しない操作は、指定した操作の後に通常の相対順序で続きます。
paint-orderは外側のストロークを作りますか？ ストロークを移動したりオフセットしたりはしません。不透明な塗りが、中央配置のストロークの内側部分を隠します。残るストロークは、穴や隙間を狭くする場合があります。
SVGの輪郭がまだ重く見えるのはなぜですか？ 表示サイズに対してストロークが太すぎる、塗りが透明、別のCSSが描画順序を上書きしている可能性があります。それらを確認し、最終サイズで小さな穴を調べます。
参考資料
- W3C — SVG 2の描画 — 描画順序と塗り・ストロークの関係を定義しています。
- MDN — SVGのpaint-order属性 — キーワード順序、対応要素、プレゼンテーション属性に対するCSSの優先を説明しています。
- MDN — CSSのpaint-orderプロパティ — 継承と省略したキーワードの並びを説明しています。
ラスターのエンブレムしかない場合は、編集可能なロゴSVGを準備し、穴を確認してから、納品用コピーを作る前に想定サイズで輪郭をテストしてください。
