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

エントリーポイント

このことにまったく慣れていない場合は、最初にたくさんのリンクを用意してお手伝いします。その後は何も変わりませんが、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 要素はベクター グラフィック要素です。これは、文字で表現(xiàn)された幾何學(xué)図形の集まりとして理解できます。たとえば、無料の代替手段として Adob??e Illustrator または Inkscape を使用して作成できます。

出発點(diǎn)

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

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

ファイルの構(gòu)文

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

間違った例:

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

予想される構(gòu)文:

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

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

注目のSVGタグ

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

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

サイズと位置

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

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

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

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

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

結(jié)果:

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

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

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

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

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

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

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

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

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

色と塗りつぶしの管理

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

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

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

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

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

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

コードの観點(diǎn)から見ると、例えば 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"

ポリゴンまたはパスを描畫するときに適用される偶數(shù)値には注意が必要です。交差するパスセグメントの內(nèi)側(cè)のみを塗りつぶします。

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

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

最適化

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

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

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

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

結(jié)果

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

<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 の要素を手動(dòng)でアニメーション化する以外に、これより良い方法はわかりません。 2 番目のオプションは、アニメーション化する要素が 5 つ以上ある場合の絶対的な拷問です。</p>

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

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

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


          

            
        

以上があなたのための SVG ハックの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。