6 つの一般的な SVG の失敗 (およびその修正方法)

最近、インライン SVG のデバッグ方法について尋ねられました。 これは DOM の一部であるため、任意のブラウザー DevTools で任意のインライン SVG を検査できます。 そのため、SVG を最適化するための潜在的な問題や機会を調査し、発見することができます。

しかし、SVG がまったく表示されないこともあります。 そのような場合、デバッグ中に私が探す XNUMX つの特定の事柄があります。

1。 ザ viewBox 値

　 viewBox は、SVG を操作する際によくある混乱のポイントです。 それなしでインライン SVG を使用することは技術的には問題ありませんが、その最も重要な利点の XNUMX つであるコンテナーによるスケーリングを失うことになります。 同時に、構成が不適切な場合、不必要なクリッピングが発生する可能性があります。

要素は切り取られたときに存在します — それらは、私たちが見えない座標系の一部にあるだけです。 グラフィック編集プログラムでファイルを開くと、次のようになります。

これを修正する最も簡単な方法は？ 追加 overflow="visible" スタイルシートにあるかどうかにかかわらず、SVG にインラインで style 属性、または SVG プレゼンテーション属性として直接。 しかし、 background-color SVG に、またはその周りに他の要素がある場合、物事は少しずれて見えるかもしれません。 この場合、最良のオプションは編集することです viewBox 非表示になっていた座標系の部分を表示するには:

についていくつかの追加事項があります viewBox このトピックについて話している間、カバーする価値があるもの:

どのように viewBox 動作しますか？

SVG は無限のキャンバスですが、ビューポートと viewBox.

　 ビューポート 無限キャンバス上の窓枠です。 その次元はによって定義されます width および height 属性、または CSS で対応する width および height プロパティ。 任意の長さの単位を指定できますが、単位のない数値を指定すると、デフォルトでピクセルになります。

　 viewBox XNUMX つの値で定義されます。 最初の XNUMX つは、左上隅の開始点です (x および y 値、負の数は許可されます)。 これらを編集して画像をリフレームしています。 最後の XNUMX つは、ビューポート内の座標系の幅と高さです。これは、グリッドのスケールを編集できる場所です (これについては、セクションで説明します)。 ズーム).

これは、SVG を示す簡略化されたマークアップです。 viewBox と width および height 属性は両方とも <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

リフレーミング

したがって、この：

<svg viewBox="0 0 700 700">

…これにマップします:

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

私たちが見るビューポートはどこから始まりますか 0 x軸上と 0 y 軸上で交わります。

これを変更すると：

<svg viewBox="0 0 700 700">

…これに：

<svg viewBox="300 200 700 700">

…幅と高さは同じままです (700 単位)、座標系の始点は現在 300 x 軸上の点と 200 y軸上。

次のビデオでは、赤を追加しています <circle> に中心を置いて SVG に 300 x 軸上の点と 200 y軸上。 がどのように変化するかに注意してください。 viewBox 座標を同じ値に変更すると、円の配置もフレームの左上隅に変更されますが、SVG のレンダリング サイズは同じままです (700×700）。 私がしたのは、 viewBox.

ズーム

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

これらのパラメータを変更すると、Illustrator で何が起こるか見てみましょう。 アートボードは、 viewport 白い 700 ピクセルの正方形で表されます。 その領域の外側にあるものはすべて、無限の SVG キャンバスであり、デフォルトでクリップされます。

下の図 1 は、青い点を示しています。 900 x 軸に沿って 900 y軸に沿って。 最後のXNUMXつを変更すると viewBox からの値 700 〜へ 900 このような：

<svg viewBox="300 200 900 900" width="700" height="700">

…その後、下の図 2 に示すように、青い点がほぼ完全に表示されます。 viewBox の値を増やしたため、画像は縮小されていますが、SVG の実際の幅と高さの寸法は同じままで、青い点はクリップされていない領域に近づきました。

ビューポートに合わせてグリッドがどのようにスケーリングされるかを示すピンク色の四角があります。単位が小さくなり、同じビューポート領域に収まるグリッド線が増えます。 次のペンで同じ値を試して、実際に動作することを確認できます。

2.行方不明 width および height

インライン SVG をデバッグするときによく確認するもう XNUMX つのことは、マークアップに width or height 属性。 多くの場合、これは大したことではありませんが、SVG が絶対配置のコンテナーまたは柔軟なコンテナー内にある場合を除きます (Safari が SVG を計算するため)。 width の値 0px auto）。 除外 width or height これらの場合、完全な画像を見ることができなくなります。 この CodePen デモを開く Chrome、Safari、Firefox での比較 (画像をタップすると拡大表示されます)。

ソリューション？ プレゼンテーション属性、スタイル属性のインライン、または CSS のいずれかで、幅または高さを追加します。 高さを単独で使用することは避けてください。 100% or auto. 別の回避策は、 右に設定 および 左の値.

あなたは遊ぶことができます 次のペン さまざまなオプションを組み合わせます。

3.不注意 fill および stroke 色

また、色を適用している可能性もあります。 <svg> インライン スタイルか CSS かを問わず、 それは問題ありませんが、マークアップまたはスタイル全体で他の色の値が存在する可能性があり、 <svg>、パーツが見えなくなります。

だからこそ、私は探す傾向があります fill および stroke SVG のマークアップの属性を削除し、それらを一掃します。 次のビデオは、CSS で赤のスタイルを設定した SVG を示しています。 fill. 不足している部分を明らかにするために削除したマークアップで、SVG の一部が白で直接塗りつぶされている例がいくつかあります。

4.IDの欠落

これは非常に明白に思えるかもしれませんが、私がこれを頻繁に目にすることに驚かれることでしょう。 Illustrator で SVG ファイルを作成し、ファイルをエクスポートするときにマークアップで適切に一致する ID を取得できるように、レイヤーの名前付けに非常に注意を払ったとします。 そして、それらの ID にフックすることによって、CSS でその SVG をスタイルすることを計画しているとしましょう。

それは物事を行うための良い方法です。 しかし、同じ SVG ファイルが XNUMX 回目に同じ場所にエクスポートされ、通常はベクターを直接コピーして貼り付けたときに ID が異なることがよくあります。 新しいレイヤーが追加されたか、既存のレイヤーの名前が変更された可能性があります。 いずれにせよ、CSS ルールが SVG マークアップの ID と一致しなくなったため、SVG が予想とは異なる方法でレンダリングされます。

大きな SVG ファイルでは、これらの ID を見つけるのが難しい場合があります。 これは、DevTools を開いて、機能していないグラフィックの部分を調べて、それらの ID がまだ一致しているかどうかを確認する良い機会です。

したがって、エクスポートされた SVG ファイルをコード エディターで開き、元のファイルと比較してから交換することをお勧めします。 Illustrator、Figma、Sketch などのアプリはスマートですが、それは私たちがそれらを精査する責任がないという意味ではありません。

5.クリッピングとマスキングのチェックリスト

SVG が予期せずクリップされ、 viewBox 大丈夫です。私は通常、CSS を調べます。 clip-path or mask 画像に干渉する可能性のあるプロパティ。 インライン マークアップを見続けたくなる気持ちはありますが、SVG のスタイル設定が別の場所で行われている可能性があることを覚えておくとよいでしょう。

CSS クリッピングとマスキング 画像や要素の一部を「隠す」ことができます。 SVG では、 <clipPath> 中途半端な結果のない画像の一部を切り取るベクトル操作です。 の <mask> tag は、透明度、半透明効果、ぼかしたエッジを可能にするピクセル操作です。

これは、クリッピングとマスキングが関係するケースをデバッグするための小さなチェックリストです。

• クリッピング パス (またはマスク) とグラフィックが互いに重なり合っていることを確認します。 重なっている部分が表示されます。
• グラフィックと交差しない複雑なパスがある場合は、パスが一致するまで変換を適用してみてください。
• DevTools を使用して内部コードを検査することはできますが、 <clipPath> or <mask> はレンダリングされないので、使用してください。
• 内部のマークアップをコピーします <clipPath> および <mask> を閉じる前に貼り付けます </svg> 鬼ごっこ。 次に、 fill それらの形状に合わせて、SVG の座標と寸法を確認します。 それでも画像が表示されない場合は、追加してみてください overflow="hidden" <svg> タグ。
• 次のことを確認してください ユニーク ID は <clipPath> or <mask>、クリップまたはマスクされた形状または形状のグループに同じ ID が適用されます。 ID が一致しないと、外観が崩れます。
• 間のマークアップにタイプミスがないか確認してください <clipPath> or <mask> タグ。
• fill, stroke, opacity、または内部の要素に適用されるその他のスタイル <clipPath> 役に立たない — 唯一の有用な部分は、それらの要素の塗りつぶし領域のジオメトリです。 そのため、 <polyline> として動作します <polygon> そして、あなたが使用する場合 <line> クリッピング効果は見られません。
• 適用後に画像が表示されない場合 <mask>、 fill マスキング コンテンツの完全な黒ではありません。 マスキング要素の輝度によって、最終的なグラフィックの不透明度が決まります。 明るい部分は透けて見え、暗い部分は画像の内容を隠します。

マスクされた要素とクリップされた要素で遊ぶことができます このペン.

6. 名前空間

SVG が XML ベースのマークアップ言語であることをご存知ですか? そうですね！ SVG の名前空間は xmlns 属性：

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

XML の名前空間については、知っておくべきことがたくさんあります。MDN には、その優れた入門書があります。 名前空間はブラウザーにコンテキストを提供し、マークアップが SVG に固有のものであることをブラウザーに通知します。 名前空間は、SVG や XHTML のように、複数の種類の XML が同じファイルにある場合の競合を防ぐのに役立つという考えです。 これは、最近のブラウザーではあまり一般的ではない問題ですが、古いブラウザーや、doctype と名前空間を定義する際に厳密な Gecko のようなブラウザーでの SVG レンダリングの問題を説明するのに役立ちます。

SVG 2 仕様 名前空間を必要としません HTML 構文を使用する場合。 だが それは重要です レガシーブラウザのサポートが優先される場合 — さらに、それを追加しても何も害はありません. そうすれば、 <html> 要素の xmlns 属性が定義されている場合、まれに競合することはありません。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

これは、背景画像として設定するなど、CSS でインライン SVG を使用する場合にも当てはまります。 次の例では、検証が成功すると、入力にチェックマーク アイコンが表示されます。 CSS は次のようになります。

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

background プロパティで SVG 内の名前空間を削除すると、画像が消えます。

別の一般的な名前空間プレフィックスは xlink:href. パターン、フィルター、アニメーション、グラデーションなど、SVG の他の部分を参照するときによく使用します。 推奨事項は、それを置き換え始めることです href もう 2 つは SVG XNUMX 以降非推奨になっているため、古いブラウザーとの互換性の問題がある可能性があります。 その場合、両方を使用できます。 名前空間を含めることを忘れないでください xmlns:xlink="http://www.w3.org/1999/xlink" まだ使用している場合 xlink:href.

SVG スキルをレベルアップしましょう!

これらのヒントが、不適切にレンダリングされたインライン SVG のトラブルシューティングを行っていることに気付いた場合に、時間を大幅に節約するのに役立つことを願っています。 これらは私が探しているものです。 監視している別の危険信号があるかもしれません — もしそうなら、コメントで教えてください!

肝心なのは、少なくとも基本的な理解が得られるということです。 SVG のさまざまな使用方法. CodePen の課題 多くの場合、SVG を組み込み、優れたプラクティスを提供します。 レベルアップするためのその他のリソースを次に示します。

SVG関連の良さについて、私がフォローすることをお勧めする人が何人かいます:

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/