「使用」要素を使用した自動SVG圧縮を超えて進みます

独自のSVGファイルを描画する場合、またはインターネットからダウンロードした場合、このSVG-EditorやSVGOMGのようなツールは友達です。これらのツールでファイルを圧縮するには、数秒しかかかり、ファイルサイズが大幅に削減されます。ただし、SVGインラインを使用してコードをアニメーション化または対話する必要がある場合、コードの読みやすさについてはまだできることがたくさんあります。

SVGのでコンテンツを再利用することは常にオプションではありませんが、そうである場合、実際に数分かかることを後悔することはありません。

この記事では、ファイルのサイズを抑えるためだけでなく、より読みやすく、メンテナンスが簡単になったより明確なマークアップを維持するためだけでなく、この要素の多くの利点を得ることができた例を示します。

これは、私が仕事をするために必要な最初のデザインです。もともとイラストレーターで作成されました：

次のコードをご覧ください。これは、ソフトウェアから直接エクスポートされた元のファイルで、重量は2.05kbです。

重いファイルではありません。ただし、それを開くと、空のタグ、非推奨の名前空間、不必要な空白、コンマ、およびソフトウェアが適用する追加情報がたくさんあることがわかります。これにより、コードは扱いにくくなり、スキャンするのが面倒で、ドキュメント内の数百行の大きな巻物を作成します。

また、ファイルが実際におよび要素を使用しているが、可能な限り最良の方法ではないことに気付くでしょう。そして、それはソフトウェアのせいではありません！元のファイルの各宇宙飛行士のイラストには、クリッピングマスクがあります。キャラクターを見ることができる窓のように機能する目に見えない円です。それがなければ、宇宙飛行士のスーツは円の外に洪水になります。 Illustratorでこれを避ける方法はいくつかあります。これは、Pathfinderオプションでそれらの追加部品をトリミングするなどです。そうすれば、数バイトを獲得し、表示されないグラフィックの情報を切り取るためだけに追加の円を使用しないようにします。ファイルの圧縮はソフトウェアで始まります。それでも、元のファイルを編集したくない場合に備えて、コードを改善できることがたくさんあります。

SVGをSVGOMGで圧縮し、デフォルトのオプションを維持することは何の努力もかかりません。これは、元のサイズと比較して30％の削減であり、グラフィックはまったく同じように見えます。

コンテンツの再利用

これには、SVGを通過していくつかの調整を行う必要があります。このオプションは前の例に関してより多くの時間がかかることを知っていますが、見た目ほど難しくありません。

繰り返される要素が1つあります。これは、円の中の宇宙飛行士です。それがsvgomgで圧縮するものです。結果は次のようになります：

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 0 95.8 95.8">
<style> .st3、.st4 {fill：＃ffcb2f; stroke：＃12192c; stroke-width：1.4891; stroke-miterlimit：10} .st4 {fill：＃69b2b1} </style>
<circle cx="47.9" cy="47.9" r="47.9" fill="＃12192c"></circle>   
<circle cx="47.9" cy="47.9" r="40.7" fill="＃f6a2a4"></circle>   
<defs> <circle cx="47.9" cy="47.9" r="40.7"></circle> </defs>   
<clippath> <xlink overflow="visible"></xlink> </clippath>
<g clip-path="url（＃svgid_2 _）">     
<path d="M63.9 45.6H32C-4 0-7.2 1.9-7.3 4.3L -.8 26.6H72L-.8-26.6C-.2-2.5-3.4-4-4.3-7.3-4.3z"></path>     
<path d="M74.3 86.9L66 88.2C53.8 90 41.4 90 29.1 88.1L-7.7-1.2V-14C0-4 3.2-7.2 7.2-7.2H38.5C4 0 7.2 3.2 7.2 7.2v14Z/>     
<PATH D = " m31.8 .7-.6></path>>>>     
<circle cx="31.5" cy="20.7" r="2.8"></circle>     
<circle cx="47.9" cy="51.4" r="20.3"></circle>     
<path d="M64.5 53.1C0 8-7.4 11.2-16.5 11.2S31.4 61 31.4 53.1S7.4-14.4 16.5-14.4 16.6 6.4 16.4 14.4Z" fill="NONING" stroke="＃12192C" stroke-width="1.489" stroke-linecap="ROUND" stroke-linit="ROKEY-MITERLIMIT =" m65.9></path>>>>     
<path fill="none" stroke="＃12192c" stroke-width="1.489" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m29.6 87.9v-11"></path>   
</g> 
</svg>

最初の推奨事項：

2. IDの名前をあなたにとって理にかなっているものと名前を変更してください。
3. ストロークウィッド= "1.489"のような複雑な数字をストロークウィット= "1.5"に丸めます。これは、チェックされた境界線をスケーリングするオプションでイラストレーターのベクトルをサイズ変更すると起こりうるものです。
4. ストロークマイテルリミット= "10"を削除してください。ストロークラインにラインが丸いため、必要はありません。
5. このコードは、宇宙飛行士のテンプレートになります。すべてをグループにラップし、そのグループにIDを追加し、タグ内に配置する必要があります。その中に円がある要素が既にあることに注意してください。それはより大きなタグの一部になるので、それを削除できます。

最初の2つの円は、さまざまな半径と色の形状に満たされていることに注意してください。私たちは小さなものを維持し、同じ効果を達成するのに十分な大きさのストロークを追加することができます。繰り返しますが、そもそもイラストレーターに境界線のある円を使用することを避けることができます。

もう1つの重要なことは、現在のViewBoxが私たちが構築したいものには小さすぎることです。それを大きくして、X軸にいくつかのネガティブスペースを追加して、宇宙飛行士を真ん中からクローニングし始めることができます。

Viewboxの詳細については、Amelia WattenbergerによるSVGスケーリングのこの美しいガイドをご覧ください。

私たちはこのようなもので終わります：

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="-400 0 1000 5000">
 <defs>
  <g>
   <circle cx="94.5" cy="48" r="44" fill="currentcolor" stroke="＃12192c" stroke-width="8"></circle> <clippath> <circle cx="94.5" cy="47.9" r="40"></circle> > > > >  <path d="M110.5 45.6H78.6C-4 0-7.2 1.9-7.3 4.3L-.8 26.6H48.1L-.8-26.6C-.1-2.5-3.4-4.3-7.3- 1.3C100.4 90 88 90 75.8 88.1L-7.7-1.2V-14C0-4 3.2-7.2 7.2-7.2H38.5C4 0 7.2 3.2 7.2 7.2V14Z "></path>> <path d=" M78.4 47.3H-.6C-.7 0-1.2-.6-1.2-1.2V23.2C0 -.7.6-1.2 1.2-1.2H.6C.7 0 1.2.6 1.2 1.2V22.9C0 .7-.5 1.2-1.2Z "></path> <circle cx=" 78.1 " cy=" 20.7 " r="20.3"></circle> <path d="M111.1 53.1c0 8-7.4 11.2-16.5 11.2S78 61 78 53.1S7.4-14.4 16.5-14.4 16.6 6.4 16.6 14.4Z" fill="＃13192d"></path> stroke-linecap = "round" d = "m112.5 88v76.9"/> <path fill="none" stroke="＃12192c" stroke-width="1.5" stroke-linecap="round" d="M76.3 87.9V-11"></path>> </clippath></g>
  
 </defs>
</svg>

の中にあるものはどこにもレンダリングされません。宇宙飛行士のクローニングを開始するには、このIDを次のようにリンクする必要があります。

 <xlink></xlink>

Xlink：HREFはSVG2以降に非推奨ですが、互換性のために使用する方が良いです。 HREFを最新のブラウザで使用できますが、Safariでテストしましたが、この執筆時点では機能していませんでした。 shref：hrefを使用する場合は、svgタグにこの名前空間を含めることを確認してください：xmlns：xlink = "http://www.w3.org/1999/xlink（hrefを使用する場合は必要ありません）。

これで、対応するテキストをこの最初の図に追加して、変換属性に合わせることができます。両方の要素をグループ内に配置する方が良いので、将来の場合、グループ全体を必要な位置に翻訳することができます。

 
  <xlink></xlink>
   Tech Leader 

接続線は、で直接描画できる単純な形状です。パスは怖いように見えますが、長い線の場合、心配することはあまりありません。このコードについて説明します：

 <path d="M-4 200V-25H200"></path>

d = ""はデータ用であり、そこにコマンドを配置します。 mは、絵を描き始める場所に手を動かすことです（しかし、それは何も描いていません）。 -4 200とは、鉛筆を4ユニットを左に、200枚のビューボックスの下部に配置することを意味します（SVG座標系の方向に続きます）。 vは、この場所から-25ユニットまで移動する垂直線の描画を開始するコマンドです。 Hは水平用であるため、そこから右200に線を引いています。ロゴライターのように感じます。

3つのパスで行を分離しましたが、一連のコマンドの後にM値で1つだけを使用して手を動かし、座標系の新しいポイントから描画を開始できます。

最終文書を見てください。これで、ファイルの重量は779バイトで、 12行の読みやすくスケーラブルなコードがあります。

で定義した属性の値を宣言すると、要素の性質のためにクローンで変更することはできません。そのため、メインサークルの上記の例では、すべての複製の背景を制御するためにCurrentColorの値に置き換えられました。 CurrentColorは、要素のCSS色値（またはその上の任意の要素）を継承します。 SVGでは、複製された宇宙飛行士にクラスを追加し、それらのクラスにCSSの色の値を追加しています。このようにして、そのクラスで要素のすべてのインスタンスを変更することができます。 とそのコンテンツのスタイルについて詳しく理解するために、Sara Soueidanによるこの投稿には、知っておくべきすべてのものがあります。

このコードの準備を整えると、グラフィックをより簡単に拡大することができます。

読みやすさとコードの量を比較するために、3つの例を並べて次に示します。241から10のきちんとした線になりました。

以上が「使用」要素を使用した自動SVG圧縮を超えて進みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。