6一般的なSVGは失敗します（およびそれらを修正する方法）

最近、インラインSVGをデバッグする方法を尋ねられました。 DOMの一部であるため、ブラウザのDevToolsのインラインSVGを確認できます。このため、私たちは物事をスケーリングし、SVGの最適化の潜在的な問題や機会を見つけることができました。

しかし、時々、SVGをまったく見ることさえできません。これらの場合、デバッグ時に6つの特定の側面を探します。

1

要素がトリミングされている場合、それらはそこにあります - それらは私たちが見ることができない座標系の一部にすぎません。いくつかのグラフィック編集プログラムでファイルを開くと、次のように見えるかもしれません。

最も簡単なソリューションは何ですか？スタイルシートで、インラインスタイルの属性で、またはプロパティを表すためのSVGとして直接

をSVGに追加します。ただし、SVGに背景色を適用したり、その周りに他の要素を持っている場合、物事は少し間違っているように見えるかもしれません。この場合、最良のオプションはViewBoxを編集して、隠された座標系パーツを表示することです。

viewboxについて、議論する価値がある余分なことがいくつかあります：

overflow="visible"ViewBoxはどのように機能しますか？

svgは無限のキャンバスですが、表示されているものとビューポートとビューボックスを通じてそれをどのように見るかを制御できます。

viewport

は、無限のキャンバスの窓枠です。その寸法は、

および

プロパティによって定義されるか、CSSの対応するおよびプロパティを使用して定義されます。必要な長さの単位を指定できますが、ユニットの数字を提供すると、デフォルトでピクセルになります。 width heightwidthviewbox heightは4つの値で定義されています。最初の2つは、左上隅の出発点です（xとyの値、負の数が許可されます）。これらを編集して再構成しています。最後の2つは、ビューポートの座標系の幅と高さです。ここでは、グリッドのスケールを編集できます（スケーリングセクションで説明します）。

プロパティを示す単純化されたマーカーは、：：

に設定されています。 <svg></svg> widthrecomposeheight

だから、これ：

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

…これにマッピング：

<svg viewbox="0 0 700 700"></svg>

表示されるビューポートは、x軸の0、y軸の0が交差するところから始まります。

このコンテンツの変更：

<svg viewbox="start-x-axis start-y-axis width height"></svg>

…この点まで：

…幅と高さは同じままです（それぞれ700単位）ですが、座標系の開始点はX軸で300ポイント、Y軸では200ポイントになります。

<svg viewbox="0 0 700 700"></svg>

以下のビデオでは、X軸に300ポイント、Y軸に200ポイントの中心があるレッド<circle></circle>をSVGに追加しました。 Viewbox座標を同じ値に変更すると、円の配置がフレームの左上隅に変更され、SVGのレンダリングサイズは同じままです（700×700）。私がしたのは、Viewboxで「再構成」することだけでした。

Zoom

ビューボックス内の最後の2つの値を変更して、画像をズームインまたはズームアウトできます。値が大きいほど、ビューポートに追加されるSVGユニットが増え、画像が小さくなります。 1：1の比率を維持したい場合、ビューボックスの幅と高さは、ビューポートの幅と高さの値に一致する必要があります。

これらのパラメーターをイラストレーターで変更するときに何が起こるか見てみましょう。アートボードは、700ピクセルの白い正方形で表されるビューポートです。このエリアの外側のすべては、無制限のSVGキャンバスであり、デフォルトでトリミングされます。

次の図1は、X軸の900に、Y軸の900にある青い点を示しています。以下に示すように、最後の2つのViewbox値を700から900に変更した場合：

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

…以下の図2に示すように、青い点はほぼ完全に表示されます。ビューボックスの値が増加するため、画像は削減されますが、SVGの実際の幅と高さの寸法は同じままであり、青いドットは未塗りの領域に近づきます。

ビューポートにどのようにメッシュがスケーリングするかの証拠としてピンクの正方形があります。ユニットが小さくなり、同じビューポート領域にメッシュラインが増えます。以下のペンで同じ値を使用して、どのように機能するかを確認できます。

2

インラインSVGをデバッグするときに私が見るもう1つの一般的な質問は、

>属性がタグに含まれているかどうかです。多くの場合、SVGが絶対的な位置または柔軟なコンテナを備えたコンテナ内に配置されない限り（SafariはAutoの代わりに0pxを使用してSVG幅値を計算するため）、これは大したことではありません。これらの場合、幅または高さを除くと、このCodepenデモを開いてChrome、Safari、Firefoxで比較することで見たように、画像全体を見ることができなくなります（画像をクリックすると、より大きなビューが表示されます）。

width解決策？表現プロパティ、インラインスタイルのプロパティ、またはCSSにかかわらず、幅または高さを追加します。特にheightまたは

に設定されている場合は、高さだけを使用しないでください。もう1つの解決策は、

および100%値を設定することです。 auto right次のペンで試して、さまざまなオプションを組み合わせることができます。 left

3 また、インラインスタイルであろうとCSSからであろうと、

タグに色を適用している可能性があります。これは良いことですが、タグやスタイルには、

に設定された色と矛盾する他の色の値がある可能性があり、コンテンツの一部が見えなくなります。

これが、SVGのタグ内の

およびfillプロパティを調べてそれらを削除する傾向がある理由です。次のビデオでは、CSSに赤い塗りつぶしでスタイリングしたSVGを示しています。 SVGには、パディングがマーカーの白で直接満たされている場所がいくつかあり、不足している部分を表示するために取り外しました。 stroke

4がありません

これは非常に明白に思えるかもしれませんが、それがどれほど頻繁に起こっているのかを見ると驚くでしょう。 IllustratorでSVGファイルを作成し、レイヤーに名前を付けるために非常に一生懸命働いて、ファイルをエクスポートするときに素敵なマッチングIDを取得できると仮定します。これらのIDに接続して、CSSのSVGをスタイリングする予定であるとします。

これはそれを行う良い方法です。ただし、ベクトルを直接コピー/貼り付けたときに、同じ場所に同じ場所にエクスポートされ、IDが異なる場合が何度もあります。たぶん、新しい層が追加されたか、既存のレイヤーの1つが名前が変更されたか、他の何かが変更されました。いずれにせよ、CSSルールはSVGタグのIDと一致せず、SVGが予想とは異なるレンダリングを行います。

これらのIDを大規模なSVGファイルで見つけるのが困難な場合があります。これは、devtoolsを開き、機能しないグラフセ​​クションを確認し、それらのIDがまだ一致するかどうかを確認するのに適しています。

それで、コンテンツを交換する前に、コードエディターでExport SVGファイルを開き、元のファイルと比較する価値があると思います。 Illustrator、Figma、Sketchなどのアプリケーションは賢いですが、それはそれらをレビューする責任がないという意味ではありません。

5

SVGが誤ってトリミングされ、ビューボックスが正しくチェックされている場合、通常、画像に干渉する可能性のあるCSSの

または

プロパティを見ます。インラインマーカーを見るのは魅力的ですが、SVGのスタイルが他の場所で起こる可能性があることを覚えておくのが最善です。 clip-path mask CSSクロッピングとマスキングにより、画像または要素の部分を「非表示」することができます。 SVGでは、

は、中間の結果なしで画像の一部をトリミングするベクトル操作です。

ラベルは、透明性、半透明の効果、ぼやけたエッジを可能にするピクセル操作です。 <clippath></clippath> <mask></mask> ここに、トリミングとマスキングを含むデバッグ状況のための小さなチェックリストがあります：

• クリッピングパス（またはマスク）と図が互いに重複していることを確認してください。重複する部分は表示されている部分です。
• グラフと交差しない複雑なパスがある場合は、一致するまで変換を適用してみてください。
• <clippath></clippath>または<mask></mask>がレンダリングされていない場合でも、DevToolsを使用して内部コードを確認できますので、使用してください！
• マークを<clippath></clippath>および<mask></mask>でコピーし、タグを閉じる前に貼り付けます。次に、これらの形状にパディングを追加し、SVGの座標と寸法を確認します。それでも画像が表示されない場合は、タグに追加してみてください。 <svg></svg> overflow="hidden"

>一意のIDが使用されているかどうか、および同じIDがトリミングまたはマスクされている形状グループまたは形状グループに適用されるかどうかをチェックします。不一致のIDは、外観を台無しにする可能性があります。

<clippath></clippath> <mask></mask>またはの間のマークでタイプミスを確認してください。

<clippath></clippath>、<mask></mask>、、、または

内の要素に適用される他のスタイルは役に立たない - 唯一の便利な部分は、これらの要素の充填領域のジオメトリです。だからこそ、

を使用すると<clippath></clippath>のように振る舞い、fillを使用すると、作物効果が表示されません。 stroke opacity <polyline></polyline> <polygon></polygon><line></line> を適用した後に画像が表示されない場合は、マスクのコンテンツが完全に黒ではないことを確認してください。マスク要素の明るさは、最終図の不透明度を決定します。より明るい部分を見ることができ、暗い部分が画像の内容を隠すことができます。

このペンでマスクと作物の要素を使用して練習できます。 <mask></mask> 6

SVGがXMLベースのマークアップ言語であることをご存知ですか？はい、そうです！ svgの名前空間はプロパティに設定されています：

XMLの名前空間について知っておくべきことがたくさんあり、MDNの最初の良い紹介があります。名前空間は、SVG固有のタグを付けているコンテキストをブラウザに提供すると言えます。アイデアは、同じファイル（SVGやXHTMLなど）に複数のタイプのXMLがある場合、名前空間は競合を防ぐのに役立つということです。これは最新のブラウザではあまり一般的ではありませんが、ドキュメントの種類と名前空間を定義する際にGeckoのような古いブラウザーやブラウザの厳格なSVGレンダリングの問題を説明するのに役立ちます。

SVG 2仕様では、HTML構文を使用する場合、名前空間は必要ありません。しかし、レガシーブラウザをサポートすることが優先事項である場合、それは非常に重要です。そして、それを追加することは損傷を引き起こしません。このようにして、要素のxmlns属性を定義する場合、これらのまれなケースでは矛盾はありません。

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

CSSでインラインSVGを使用する場合も

同じことが当てはまります（たとえば、背景画像として設定）。次の例では、検証が成功した後、チェックマークアイコンが入力ボックスに表示されます。 CSSの外観は次のとおりです

<svg viewbox="0 0 700 700"></svg>

バックグラウンドプロパティのSVG内の名前空間を削除すると、画像が消えます。

別の一般的な名前空間プレフィックスは

です。パターン、フィルター、アニメーション、グラデーションなど、SVGの他の部分を参照するときによく使用します。 SVG 2以降、もう1つは廃止されているが、古いブラウザーとの互換性の問題がある可能性があるため、

で交換を開始することをお勧めします。この場合、両方を使用できます。まだxlink:hrefを使用している場合は、名前空間を含めてください。 href xlink:hrefSVGスキルを向上させてください！ xmlns:xlink="http://www.w3.org/1999/xlink"

誤ってレンダリングされたインラインSVGをトラブルシューティングすることに気付いた場合、これらのヒントがあなたが多くの時間を節約するのに役立つことを願っています。これらは私が探しているものです。たぶんあなたは注意を払うために異なる赤い旗を持っています - もしそうなら、私にコメントで私に知らせてください！

最も重要なことは、SVGを使用するさまざまな方法を基本的に理解する価値があることです。 Codepenの課題には、多くの場合、SVGが含まれ、優れた実践を提供します。レベルを向上させるためのリソースをいくつか紹介します：

Lea Verouには広範なSVG知識があり、このトピックに関する講義を何度も提供しています（Frontend United 2019のこのビデオなど）。
• svgアニメーション
（サラドラスナー）
• SVG Essentials （Amelia Bellamy-Royds、J。DavidEisenberg）
• 実用的なsvg（chris coyier）
SARA SOUEIDAN

カール・シューフ

キャシー・エヴァンス

• val head
• ana tudor

以上が6一般的なSVGは失敗します（およびそれらを修正する方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。