Clever Geek Handbook

ネタバレ：SVGアイコンを1つの方法で挿入する

画像 この記事では、SVGアイコンをWebページに挿入する問題について説明します。



私たちが持っているものとそれをどう使うか。 グローバルには、3つの方法があります。





フォントの形式でアイコンを挿入するオプションについては説明しません。このアプローチには多くの欠点があります（それらのいくつかは純粋に主観的です）。 。



これらのすべての方法には長所と短所があります。 SVGの出現により、アイコンの新しい要件があります。 たとえば、PNGの時代には、サイトのさまざまな部分でさまざまなサイズで、さまざまな色で同じアイコンを使用することはありませんでした。 これを行うには、異なる色とサイズのアイコンをデザイナーに依頼する必要があります。 しかし、SVGの登場により、CSSを使用してアイコンの外観を希望どおりに変更できるようになったため、どこにでも同じアイコンを挿入し始めました。



例を挙げます。

アイコンがあります-評価のアスタリスク。 どこか白、どこか黄色、大小。 さらに、2.5または4+の評価を示すために、たとえば、アスタリスクの半分が切り取られている場合があります。



この例を実装するには、色と形状ごとに少なくとも4つのPNGアイコンが必要ですが、SVGがある場合は、4つではなく、このタスク専用に設計された1つの一意の特別なアイコンで簡単に対応できます。



アスタリスクをDOMに直接挿入し、必要に応じてスタイルを使用してスタイルを設定できます。 これが最初のオプションであり、よく知られた方法です。



利点の最初のバージョンでは、グラフィック要素の便利な制御、アイコンの個々の部分のアニメーションなど、SVGタグの完全な制御をリストできます。 欠点のうち、最初は、この場合、大きなDOMサイズを取得することです。これは、何らかの理由であまり良い現象ではありません。 2番目の欠点は、3番目のオプションと比較して、サイズ、位置（垂直および水平の中心）が簡単なタスクではない場合があることです。



また、2番目のオプションについては、他の2つのオプションの利点はないため、最も冗長です。



何が得られますか？ アイコンを挿入するための2つのオプションがあり、それらには独自の利点があり、選択するのが難しい場合があります。



ここで、最初のオプションと3番目のオプションのほぼすべての利点（アイコンの個々の部分のアニメーションを除く）を使用できることを想像してください。



つまり、CSS background-imageまたはHTML IMGタグを使用してアイコンを挿入し、ユーザーの裁量で、SVGの各タグの色を、パス、ポリゴン、または円に関係なく変更します。



これがどのように見えるかです： 



background-image: url(star.svg?p=red,$00ff00,,green);


または 



 <img src=”star.svg?p=red,$00ff00,,green”>


アイデアは明確だと思います。構文はすでにサーバーの設定に依存しているので、実装について考える必要があります。



この問題を自分で解決した方法のリンクを次に示します。 クールであれば、どんな決定でも大歓迎です。



仕組み



ディレクトリ構造
  • キャッシュ -キャッシュフォルダー
  • colors-元のアイコンの色を保存するためのフォルダー
  • アイコン -フォーマットされたアイコンのフォルダー
  • originals-すべてのアイコンがダウンロードされるフォルダー（手動で設定することもできます）




作業サイクル
元のフォルダーからすべてのアイコンを取得し、DOMDocumentを使用して、色（塗りつぶし）を持つすべてのアイコンタグを検索します。アイコンの色は、この「％1」の形のポインターに置き換えられ、元の色を彼女が変わらないようにしたいなら。





この実装の使用例。 



 icon/?p=parse /*    */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 icon/?p=empty /*   ,     parse */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 background-image: url("icon/?p=leaderboard,red,blue,$000,green,orange,yellow,$0f0");


画像 



 background-image: url("icon/?p=leaderboard,red,blue,$000");


画像 



 background-image: url("icon/?p=leaderboard,,blue,$000,orange,red");


画像 



 background-image: url("icon/?p=history");


画像 



 background-image: url("icon/?p=history,$ff0000");


画像



パフォーマンスの観点からは、これは最善のアイデアではありません。キャッシュがあっても、静的出力ではなく、スクリプトはとにかく動作しますが、アイコンに別の色が必要な場合にのみこの挿入を使用できますが、アイコンが頭痛になり、この売春宿で兄弟を見つけることさえできないプロジェクトは、そのようなプロジェクトの私の観察によれば、これまでのところ、このオプションを検討することができます-ベストプラクティス。



PS：これまでのところ、本番環境で使用する時間はありませんでした。他に何を修正できるのか、これにどのような問題が発生するのか疑問に思っています。よろしくお願いします。



PSS：サーバーを構成するユーザーフレンドリーな方法は、ユーザーAlexLeonov habrahabr.ru/post/278825/#comment_8799315によって提供されます


More articles:


All Articles