アイコンについて説明している場合、アイコンは2つの方法でスケーリングできます（他の方法はわかりません）。アイコンをフォントに変換して@ font-faceで接続するか、これらのアイコンの形式としてSVGを使用します。
トピックから少し離れて、背景を教えてください。
背景
私は自分のサイトでフォントアイコンを使用することにしました。すべてが問題ないように思えます。サイズを変更し、色を設定し、サーバーへの要求は1つだけです（フォントを接続するため）。 つまり、プラグインフォントは一種の「CSSスプライト」ですよね？
どこでもすべてが美しく見えるかどうかを確認しましょう。 一部のサイズではアイコンが斜めに見え、アンチエイリアシングをオフにすると、一般にそれらを見るのが嫌になったため、すべてが望ましいとは限りませんでした。 どうする 2番目のオプション-SVGを使用します。これについては説明します。
SVGを使用したCSSスプライト
SVG形式でスプライトを折り畳むという考え方は新しいものではありません。 確かに、多くの人がスマッシングマガジンに関するこの投稿を読んでいます。 そこで、著者の考えを開発し、実験し、より柔軟なオプションを提供することにしました。 そして、すべてを明確にするために、ここでいくつかの例を繰り返します。
したがって、まず最初に、SVGスプライトを実行する必要があります。 プログラムでSVGファイルを作成する方法については、まだ理解していません（コミュニティが私を許し、それについて読む場所へのリンクを提供してくれることを願っています）。 したがって、スプライトをCorelDRAW（イラストレーターも適していると思います）で実行し、SVGで保存します。
迅速な実装のために、フォントを使用してこれらのアイコンを印刷しました（クリック可能）：
例として任意のHTMLコードを取り上げます。
<div class="icons"> <a class="tw" href="#">Twitter</a> <a class="fb" href="#">Facebook</a> <a class="vk" href="#"></a> <a class="gl" href="#">Google+</a> <a class="rs" href="#">RSS</a> </div>
CSSで最も基本的なことを書いてみましょう。
.icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /* smashingmagazine.com, px em */ .icons .tw {background-position: 0 0;} .icons .fb {background-position: 0 -48px;} .icons .vk {background-position: 0 -96px;} .icons .gl {background-position: 0 -144px;} .icons .rs {background-position: 0 -192px;}
sprite.svgが76x520の明確に定義された寸法で作成されていること、つまり アイコンを増やすことができる最大サイズは76x76です。
しかし、SVGを相対的なサイズで保持するとどうなりますか。 割合で？ より良いです アイコンは、絶対に任意のサイズに拡大縮小でき、品質を失うことはありません。
CSSスタイルの微調整：
/* */ .icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /* */ .icons .tw {background-position: 0 0;} .icons .fb {background-position: 0 -25%;} .icons .vk {background-position: 0 -50%;} .icons .gl {background-position: 0 -75%;} .icons .rs {background-position: 0 -100%;}
結果は同じですが、
background-size
は何でもかまいません。
複雑なスプライトを作成する
上記の例では、5つのアイコンのみが使用され、パーセンテージの計算はそれほど難しくありません。 もっと複雑な例を見てみましょう。 これまでと同じ「フォント」アイコンで。 次のようなスプライトがあるとします。
私たちがしていること、または新しい
i
タグをhtmlに追加して、アイコンを使ってスタイルを書くことができます：
<div class="icons"> <a class="tw" href="#"><i></i>Twitter</a> <a class="fb" href="#"><i></i>Facebook</a> <a class="vk" href="#"><i></i></a> <a class="gl" href="#"><i></i>Google+</a> <a class="rs" href="#"><i></i>RSS</a> </div>
疑似要素
::before
または
::after
を使用してアイコンを作成します。 擬似要素の
::before
に
::before
を使用します-好きなように。
リンク用の新しいクラスを考え出さず（結局、スプライトが変更された）、古いクラスは残したことに注意してください。もちろん、クラスには新しいアイコン用の独自のクラスがあります。 そして、コードで投稿を混乱させないように、これらについて検討します。
それでは、CSSにいくつかの変更を加えましょう。
.icons a { float: left; display: inline-block; padding: 4px 0 4px 25px; margin-right: 5px; text-decoration: none; color: #444; /* */ position: relative; } /* ::before */ .icons a::before { position: absolute; left: 0; top: 0; content: ''; width: 25px; height: 25px; /* */ background-image: url('sprite.svg'); background-repeat: no-repeat; background-size: 20px auto; } /* ( , ) */ .icons .tw::before {background-position: 0 0;} .icons .fb::before {background-position: 0 -25%;} .icons .vk::before {background-position: 0 -50%;} .icons .gl::before {background-position: 0 -75%;} .icons .rs::before {background-position: 0 -100%;}
いくつか説明しますが、そうしないとほとんど混乱します:)。
background-size: 20px auto;
「20」という数字は必要なアイコンのサイズであり、「自動」はスプライトの残りのサイズです。 たとえば、「auto」を20pxに置き換えると、1つのアイコンの代わりに、サイズが20x20ピクセルのスプライト全体が取得されます。
さらに、擬似要素によって形成されるブロックの幅と高さ、つまり
background-size
とともに、アイコンがトリミングされないように
width
と
height
を変更する必要があります。
相対サイズを計算します
おそらくこれが重要なポイントであり、絶対サイズを設定し、
background-size
、
width
および
height
変更する場合、それらも変更するか、または（より難しい）相対的なサイズを計算し、
background-size
、
width
および
height
変更する場合、選択する必要があります変更しないでください。
したがって、スプライトの実際のサイズは500x250ピクセル、行ごとに10アイコン、列ごとに5アイコン、合計50アイコン（例49）で、サイズはそれぞれ50x50ピクセルです。
サイズの計算は非常に簡単です、なぜなら スプライトの実際のサイズに基づいて構築します。 スプライトを扱った人は説明する価値がありません。 確かに、ここには微妙な点が1つあります。アイコンのサイズがそれぞれ20ピクセルに縮小され、スプライトも変更されて200x100ピクセル（10 * 20および5 * 20）に等しくなりました。つまり、サイズ（
background-position
）または0 0 、0 -20px、-20px 0、-20px -20px、0 -40px、-40px 0、-40px -40pxなど、または0 0、0 -11.1％、0 -22.2％、 0 -33.3、25％0、25％-11.1％、25％-22.2％、25％-33.3など
したがって、任意の複雑さのスプライトを作成し、各要素の
background-position
を計算できます。 幸いなことにまたは不幸なことに、探究心は私たちが言われたことに専念することを許しません。したがって、さらに複雑な例を簡単に見てみましょう。
SVGを使用したより複雑なスプライト
ある種のデザインがあるとしましょう。私はそれをかなりおおよそ（クリック可能）に描写しました：
長方形が美しいクリップアートのようなものであると仮定すると、難しいですが、そうではありません。 私たちにできること：
1.元のサイズを変更せずにすべてのレイヤーをスプライトに配置し、各オブジェクトを対応する要素に配置します。
2.すべてのオブジェクトを同じサイズに変換し、各オブジェクトを対応する要素に配置した後、すべてのレイヤーをスプライトに折りたたみ、オブジェクトのサイズを必要なサイズに変更します。
HTMLまたはCSSコードの例を挙げると、もはや意味をなさないと思います。 したがって、すべてが明確であり、前の例との類推によって構成されています。
結論として
ここで、SVGを使用したスプライトの利点を要約して説明します。 まず、ファイルを1つだけ取得しました。これは、北への1つの要求-hare1が殺されたこと、2番目に、SVGファイルの重量がPNGやJPGなどよりもはるかに少ないため、ダウンロード速度が高いこと-hare2が殺されたこと、3番目、画像品質を損なうことなく無制限のスプライトサイズを取得しました。つまり、無制限の画像スケーリングで問題を解決しました-hare3は殺されました。
フォントアイコンの前にあるSVGの唯一のマイナス点：CSSでアイコンを装飾することはできません。たとえば、
text-shadow
追加したり、色を変更したりでき
text-shadow
。 そして、非常に大きなプラスは、アンチエイリアシングが無効になっていると、フォントとは異なり、SVGのすべての行がフラットで明確になることです。
PS SVGは、活動のための巨大なフィールドを提供してくれます。CSSスプライトの例で、私はこれを完全に確信しました。 もちろん、乾いた言葉で「SVGを相対的なサイズに保ちます」と言うこともできますが、投稿全体で私にはわかりました。
ご清聴ありがとうございました。 またね
UPD：::
::before
および
::after
は、擬似クラスではなく擬似要素です-申し訳ありませんが、間違っています。修正しました。 psywalkerが間に合ってくれてありがとう。
UPD： 「::」については覚えていませんでした:( 証明