Clever Geek Handbook

SVGの使用（パート1）

可能な限りSVGを使用するのが大好きです。



フロントエンドを作成するとき、グラフィック全体を2つのカテゴリに分割します。

  1. 「コンテンツ」-コンテンツに応じて変化する画像
  2. 「UI」-サイトに統合されるすべて


名前はあまり重要ではありませんが、これら2つのカテゴリを認識することが重要です。 すべてのアイコンを1つのスプライトに結合できます（第2部で説明します）が、記事で使用されている画像に対してこれを行うことはありません。



内容



「コンテンツ」の画像には、古き良きものほど良いものはありません。 * SVGおよびビットマップ画像（PNG、JPEGなど）で動作します。 それはすべて、サイトの所有者が読み込むものに依存します。

*サーバーとCMSがMIMEタイプをブロックしない場合： image/svg+xml





私の意見では、 ブラウザタグのサポートが優れているため、SVGを操作するための代替手段を探す必要はありません。



しかし！

レスポンシブデザインを使用する場合、Internet Explorerはスケーリングしませんが、多くの人はこれを期待しています。 この例を使用してみましょう： 



 <article class="media"> <img class="media__image" src="smile.svg" alt="Smiley"> <div class="media__body"> <p><strong>Media object with SVG image.</strong> … </p> </div> </article>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 .media__image { max-width: 20%; }


SVGとPNGをテストすると、IEにのみ固有のエラーが見つかります（現在、SVGはバージョン9〜11でサポートされています）。





通常、CSSでmax-width



パラメーターを設定できます。すべての画像は適切にスケーリングされます（ただし、元の画像より大きくなることはありません）。 IEでは、この原則は機能しません。



画像のwidth



を設定する必要があります。 このように： 



 .media__image { width: 20%; max-width: 300px; }


または、親要素のグローバルmax-width



パラメーターを設定できます。 



 img { display: block; width: 100%; } .media__image { max-width: 20%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 <article class="media"> <div class="media__image"> <img src="smile.svg" alt="Smiley"> </div> <div class="media__body"> <p><strong>Media object with SVG image.</strong> … </p> </div> </article>


画像の横にテキストを合理化する場合にも同じことができます。 







 <article class="prose"> <img src="smile.svg" class="prose__image"> <p><strong>Media object with SVG image.</strong> … </p> </article>


理想的には、 .prose__image { max-width: 20%; }



.prose__image { max-width: 20%; }



その結果、これらの条件が満たされます。





おわりに



このチュートリアルでは、レスポンシブ画像の作成について説明しました。 どうして？ 実際には、タグだけを使用してそれらを追加するのは間違っています。 少なくとも幅と高さを指定するか、さらに良いことに、画像を完全に制御するために別の要素を作成する必要があります



簡単に聞こえますが、SVGを使用したことがない場合は、IEで問題が発生する可能性があります。 すべてを自分の目で見たい場合は、 問題 、 解決策 、 テキストの合理化のデモをここから入手できます 。



第2回では、UIカテゴリーでのSVGの使用について説明します。



すべての最も興味深い先！


More articles:


All Articles