あなたのための SVG ハック

私は Bytes #293 の主な HTML に興味を持ちました。彼らの動機は、State of HTML 2023 の調査 (そしてお金...ただし、スポンサー付きのセクションはメール送信から離れましょう) から来ています。

エントリーポイント

このことにまったく慣れていない場合は、最初にたくさんのリンクを用意してお手伝いします。その後は何も変わりませんが、svg についてさらに詳しく知ることができます
￣_(ツ)_/￣

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/ Introduction
• MDN の SVG チュートリアル: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

TL;DR

SVG 要素はベクター グラフィック要素です。これは、文字で表現された幾何学図形の集まりとして理解できます。たとえば、無料の代替手段として Adob​​e Illustrator または Inkscape を使用して作成できます。

出発点

人々の回答から、いくつかのパターンがわかります。特定のものは選びませんが、これらのトピックに関するいくつかの知識を共有しようとします。そのため、このトピックに関するいくつかのヒントとコツ、経験の共有、その他の一般的な知識をここで見つけることができます。

この例のような SVG スプライトのトピックは省略します。これは別のトピックであり、svg タグとはあまり関係ありません。それらのまれな使用例がまだいくつか見つかる可能性があることに同意します。

ファイルの構文

適切な SVG ファイルは、前述の幾何学的図形を表現したものである必要があります。私たちのアイコンがデザイナーやウェブサイトによって適切な形式で準備されているかどうかを確認するのは非常に簡単です。

間違った例:

<svg ...><image link:href="data:image/png;base64 .../>

予想される構文:

<svg><g><path r=""/><circle /></g></svg>

私はこれまでのキャリアの中で、何度かこの問題に足を踏み入れました。それを覚えておく価値はあります。この問題は、ラスター グラフィックスを取得し、ベクター グラフィックス プログラムにインポートし、拡張子 .svg でエクスポートしようとすると発生します。画像を魔法のようにベクター グラフィックに変換するわけではありません。

注目のSVGタグ

ほとんどの一般的な SVG 要素のチートシートを提示できます。

Tag	Description	Animated attributes
	used for grouping elements	-
	main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag	-
	Basic rectangle shape in SVG. Simple as that	✅
	Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag.	✅
	You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag	-
	Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes.	✅
	Let's call it a custom shape. They are connected straight lines where the last point connects to the first point.	✅
	Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point.	✅

これらは選択された SVG 要素のほんの一部であることに注意してください。最も一般的なものについて説明しました。他にもたくさんご利用いただけます。完全なリストはここでご覧いただけます。

サイズと位置

一般的な svg タグのいくつかに慣れてきたので、アイコンの基本パラメータを変更する次の段落に進むことができます。

若いデザイナーと仕事をしているとしましょう。彼/彼女は、あなたと同じように、Web 用に準備する方法をまだ完全には知りません。その結果、アイコンのサイズがわずかに異なり、側面のカットされたパディングが欠けている場合があります。

good one	wrong one

クラシックなケース。デザイナーと簡単に電話してこれを明確にする必要があることはわかっていますが、ここでは SVG について学びたいと思います。このシナリオではそれは行いません。自分たちで直すことができます。

コードの観点から見ると、すべては属性に関するものです。元の SVG クロス ファイルは次のようになります:

<svg ...><image link:href="data:image/png;base64 .../>

結果:

ほぼ私たちが望んでいたものです!最初のアイコンのようにパディングを保持する方法をさらに詳しく見てみましょう。

選択肢は 2 つあります。同じ viewBox 値を維持することも、ネストされたタグごとに幅、高さ、x、y の値をそれぞれ調整することもできます。

最初のオプションは単純そうに見え、非常にうまく機能しますが、落とし穴があるかもしれません。私の場合、グループタグにこの奇妙なtransform属性がありました。

<svg><g><path r=""/><circle /></g></svg>

アイコンのサイズが調整できるようになりました。ベクター グラフィックスであるため、サイズ変更後にアイコンの品質が失われることはないことに注意してください。

では、なぜ viewBox がそれほど重要なのでしょうか?

アイコンを正しく拡大縮小したり、特定の位置に設定したりする場合に重要です。 4 つの引数 viewBox="min-x min-y width height" があります。

たとえば、viewBox="0 0 100 100" は、左上隅が (0, 0) にあり、viewBox の幅が 100 単位、高さが 100 単位であることを意味します。

つまり、viewBox を変更した後でアイコンの x 属性と y 属性を調整する必要があることを意味します。これらの属性は値に従って設定されるためです。

色と塗りつぶしの管理

アイコンごとに異なる塗りつぶしが可能です。もちろん、カラー スタイルを追加するのと同じくらい簡単な場合もありますが、これは初心者レベルのコードです。

実際の開発者は、fill-rule="evenodd" をメイン要素に追加し、他のすべての手動の​​ fill 属性をタグから削除しています?

なぜなのか不思議に思うかもしれません。

これに対して可能な限り短い回答を差し上げます。 IDE から直接 1 行のコードでアイコンの色を自由にカスタマイズできます。

どうしてそんなことが可能なのか、あなたは尋ねるかもしれません。

会社のデザイン システムから単純なアイコンを扱っている場合は、アイコンを 1 つだけインポートできるはずです。サイズや色の修飾子や重複は必要ありません。

コードの観点から見ると、例えば color 属性で通常行うのと同じように、svg 要素に fill を追加するだけです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.582886"
   height="93.582893"
   viewBox="0 0 24.760471 24.760474"
   version="1.1"
  >



<p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p>

<p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p>

<p>Simply:<br>
</p>

<pre class="brush:php;toolbar:false"><svg
-   width="93.582886"
+   width="200"
-   height="93.582893"
+   height="200"

ポリゴンまたはパスを描画するときに適用される偶数値には注意が必要です。交差するパスセグメントの内側のみを塗りつぶします。

問題が発生した場合に備えて、この例を分析することを検討してください。

十字アイコンの場合、次のような結果になります:

最適化

アイコンを Web に公開する前 (または Figma からダウンロードした直後) が適切に最適化されていることを確認する必要があります。これは非常に重要です。この最後のマイルのコードレビュー中に、私は何度も引っかかったり、引っかかったりしてきました。

SVGO (または React の場合は SVGR) を使用すると、プロセスが非常に簡単になります。舞台裏で、ほとんどの場合、不要なものはすべて削除されます。

一般に、これは頼りになるツールです。バンドラーと統合するか、CLI から使用します。デフォルトのプリセットがすぐに構成されているため、インストール後すぐに使用できます。

注: 本当に必要な場合は、デフォルトのプリセットを上書きできます。プロジェクトの README で構成を確認し、ドキュメントでプラグインのリストを確認してください

結果

最終的なアイコン コードは次のようになります:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><path d= 「M9 24h32v3H9z」



<p>インクスペースからエクスポートされた生のアイコンのサイズは 871 バイトからわずか 322 バイトに削減されました。</p>

<h2>
  
  
  アニメーションによる痛み
</h2>

<p>私にとってほろ苦い最後の話題です。アンケート回答にも何度か持ち込まれました。 Lottie を使用するか、CSS で SVG の要素を手動でアニメーション化する以外に、これより良い方法はわかりません。 2 番目のオプションは、アニメーション化する要素が 5 つ以上ある場合の絶対的な拷問です。</p>

<p>もちろん、それは可能であり、私たちもそれを行うことができますが、正直に言うと、もっと興味深いことがたくさんあります?</p>

<p>まだその方法に興味があるとします。素晴らしい記事へのリンクをここに残しておきます。忍耐が必要であり、5 分以上かかることが理解できるはずです。 AI ボットがそれを助けてくれるのではないでしょうか。そうであれば、痛みは少し軽減されるかもしれません。</p>

<p>今回はここまでです。<br>
この投稿から何かを得て、良い一日をお過ごしいただければ幸いです?</p>


          

            
        

以上があなたのための SVG ハックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。