レスポンシブSVGSのための10ゴールデンルール

Sep 11, 2025

操作方法

SVGの多くの利点 - 無限にスケーラブルなベクトル画像、小さいファイルサイズとDOMとの直接統合を含む - それを自然にフィットさせる レスポンシブウェブデザイン 。 SVG仕様が10年前のものであるにもかかわらず、それは多くのブラウザやツールでの比較的最近のサポートです。

ここで、私は10の黄金の規則としてこれらの最も重要なものをまとめました。

01.ツールを正しく設定します

職人が仕事を始める前に彼の道具を鮮明にするのと同じように、SVGを使って作業する人は、最も効率的で最適化された方法でベクトル形式を提供するためにアプリケーションを設定しなければなりません。実装するにはいくつかの設定があります。

まず、そうでなければ説得力のある理由がない限り、測定値をベクタツールの「ピクセル」に設定します。それはSVG（それを測定するでしょう）には関係ありませんが ビューボックス そして、ほとんどすべての測定システムでは喜んで要素）印刷されたデフォルトのインチではなく、一般的なCSSユニットを使用してSVG描画を開発することは理にかなっています。そしてそれはまた追加の簡単なものになります @メディア 後でクエリやその他の介入。

キャンバスエリアをそれよりも大きくする必要がありません。ビットマップイメージのように、SVGの「空白スペース」は使用されず、CSSマージンで最適です。スケッチなどの多くのベクトルツールが自動的にキャンバス領域を選択された要素に自動的に収集します。

同時に、キャンバス領域を要素の正確な端にトリミングしないでください。アンチエイリアシングは依然としてSVGに適用され、それを近づけすぎることもまたアンチエイリアスを切り取ることがあります。代わりに、キャンバスの端が要素の近くに近づくところはどこでも少なくとも2ピクセルを透明にします。

応答性と性能は密接に関連しているので、小数点以下の精度を2点以下に設定します。 SVGは整数を考えていないので、ベクトルポイントは1.45882721pxの値を持つことができます。この極度の精度は完全に不要です、そしてコードの肥満とファイルサイズだけを追加するだけで、この時点で切り捨てる方が良いです。

同様に、できるだけ少ないポイントを使用してベクトル形状を描きます。リバースが実際に本当である場合、多くの新しいデザイナーはより良いポイントが優れていると仮定します。いくつかのポイントがよく配置され、ファイルのサイズも削減しながら、要素をより大きく制御できます。

この規則に従わないベクトルファイルが与えられた場合は、心配しないでください。 ベクターアート アプリケーションは「単純化」オプションを持ち、その形状を変えることなく要素内の点数を減らすために使用できる。あるいは、詳細な作業のために、私はAstute Graphicsのベクトルスクライブのようなプラグインを提案するでしょう。

02.高さと幅の属性を削除します

ほとんどのアプリは、SVGエクスポートに多くの独自の不要なコードを追加します。ほとんどのSVGファイルの開始時に必要なコード専用コードは次のとおりです。

私たちの目的のために、最も重要な側面はの取り外しです幅そして高さほとんどのアプリケーションが自動的に含まれる属性。これにより、SVGは最新のブラウザで完全に対応します。

あなたが多くのSVGを処理しているか、急いでいる場合は、このステップを手で完了する必要はありません。代わりに、あなたは3番目のゴールデンルールでレイアウトされた提案をたどることができます...

03. SVG出力を最適化し、ミニフィーする

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly — インテリジェントな手編集とプロダクションの最適化の組み合わせは、SVGファイルのサイズを著しく減らすことができます。

SVGコンテンツを作成するために使用するツールは、そのようなツールを通してその出力を処理する価値があります。 svgomg. これは著しくコードをトリミングします。通常、ファイルサイズで約20から80パーセントの節約できます。同じコードをローカルに統合することができます gulpやgruntの仕事として。

04. IEのコードを変更する

ルール2は、最適化されたSVGが最新のブラウザで完全に答えると言った。現代のブラウザとしてMicrosoft Edgeを数える場合、それが本当です。 IE 9-11には、アドレスにいくつかの問題があります。画像としてSVGを使用している場合：

＆lt; img src = "countdown.svg alt =" countdown "＆gt;

IE9-11にCSS属性セレクタを使用して画像を正しく表示できます。

 IMG [SRC $ = ".SVG"] {幅：100％;}

SVG Imagesは一般的な生産でうまく機能しますが、対話性が限られています。ほとんどのブラウザは、ページ上に配置されたSVG内の対話性とアニメーションを無視します。。さらに、SVG画像はブラウザの追加のHTTPリクエストです。

これらおよび他の理由で、SVGはインラインでますます使用されています。その場合、SVGコードはIEのためのもう少し扱いを必要とします。

に加えて PreServeaspectriatio 属性、すなわち、画像の正しいスケーリングを維持するためのもう少しのガイダンスを必要とします.SVGの幅を取ります（ 365 この場合）、高さで割ってください（ 525 そして、結果に100％増加します。これがなるでしょう パディングボトム SVGの値、 'Proppling' IEに十分に開き、SVGを正しいアスペクト比に表示します。

簡潔で明確にするために、この記事の残りの部分のコードサンプルはこれらの変更を含めません。 Amelia Bellamy-RoydsがANを書いていますスケーリングSVGの優れた記事。

05.ヒーローテキストのためのSVGを考えてみましょう

Using SVG for hero text means it will automatically scale in line with its container — HEROテキスト用のSVGを使用すると、自動的にコンテナに並ぶことができます。

そのコンテナへのテキストをサイズ化するためのCSS規格は現在ありません。 VW単位を使用してテキストを拡張することは可能ですが、それはほとんどの場合、特定のビューポートの制限でテキストを「クランプ」するために少なくとも2つのメディアクエリの介入を必要とします。ただし、SVGテキストは自動的にコンテナにサイズ変更されます。

＆lt;ヘッダ＆gt。

CSS：

ヘッダーSVGテキスト{
フォント重量：900;フォントサイズ：90ピクセル。塗りつぶし：青。

SVGインラインを保持すると、アクセシビリティとSEOの値が保持され、ページにすでに埋め込まれているフォントを使用してテキストをスタイル化させることができます。見るここに詳細については。

06.プログレッシブアイコンのための幅と高さを置いたままにする

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized — この音声バブルには、スケーリングストロークラインが適用されているため、ビューポートがサイズ変更されたときに幅が変わらない

規則2の例外はアイコンと小さなロゴです。幅そして高さあなたがそれらを次第に強化させたい場合は属性：

アクションでこのテクニックの例を見ることができますここに。

SVGアイコンをCSSでサイズするだけで、サイトのスタイルシートがロードされない場合、アイコンは置き換えられた要素のデフォルトサイズに表示されます.300px x 150px。高さと幅を属性として維持することで、デフォルトで最も近い合理的なタッチサイズにサイズを大きくし、それらが表示される方法を強化するために私たちのCSSを使用することができます。

07.ベクトル効果を使用して、ヘアラインを薄く保つ

デフォルトでは、SVGはストロークの厚さを含むビューポートですべてを拡張します。通常、これは正常に機能しますが、特にテキストの外側への影響として適用される図とストロークは、図面のサイズに関係なく、同じ厚さを同じ厚さにしたいと思うかもしれません。これは、知られていないドメインです ベクトル効果 プロパティは、プレゼンテーション属性として、またはCSSで適用できます。

パス{
    充填：#fff;ストローク：＃111;
    ストローク幅：2;
    ベクトル効果：非スケーリングストローク。

を見てみましょうこの技術の全例。

08.ビットマップを覚えておいてください

多くの開発者はSVGがベクトルのみを使用できると仮定しますが、JPEGとPNGもSVG図面に適用できます。そしてあなたがこれまでのところ私のルールに従った限り、あなたがビットマップを介して追加するとき、それらの画像は反応するでしょう鬼ごっこ：

 <1画像幅= "1024" height = "768" xlink：href = "Laise.jpg" x = "1300" y = "150" role = "image" title = "crewsnest pass"＆gt; ＆lt; / image＆gt;

09.適応解を考える

異なる適応サイズでレンダリングされた古典的なCoca-Colaのロゴ

物事を「スケッシュ」に行くことは、レスポンシブデザインの一部です。 Adaptive Designの理由でRWDが何であるかは、すべてのビューポートサイズで適切なコンテンツを提示しています。

これはさまざまな方法で達成できます。 ResponsiveLogos.co.ukはSVGスプライトを使用する一連の例を提供しますが、MediaクエリをSVGに統合して、「ブランディングモジュール」と呼びます。このアプローチにより、コンポーネントの可視性を追加、削除、および変更できます。アダプティブブランドモジュールについてもっと読む私の記事で。

これと同じ手法を図、イラスト、マップなどに使用することができます。最も簡単なモジュールでは、CSS自体をSVG内に書くことができ、前の規則で概説したように、どこにでも使用できます。

10.メディアクエリをSVGに統合します

多くの人がCSSメディアクエリがSVG自体の中に書くことができることを知りません。

そして補償する要素を拡大縮小します。

結論

SVGの無限のスケーラビリティは、その最大の資産ですが、ブラウザやベクトルグラフィックスエディタによってまだやや余ざいている機能です。これらのガイドラインをあなたの生産ワークフローに統合し、あなたのチーム内の他の人たちにそれらを他の人に伝えてくれることによって、あなたはWebのためにスムーズに敏感なSVGを作成することができ、それを毎日開発で使用する資産の一部にします。

この記事は最初に登場しました ネットマガジン 問題283; ここで購入してください ！

関連記事：

12コードテストツールを持っています
スケッチスキルを磨く
GSAPでスーパーチャージするSVGアニメーション

レスポンシブSVGSのための10ゴールデンルール

01.ツールを正しく設定します

02.高さと幅の属性を削除します

03. SVG出力を最適化し、ミニフィーする

04. IEのコードを変更する

05.ヒーローテキストのためのSVGを考えてみましょう

06.プログレッシブアイコンのための幅と高さを置いたままにする

07.ベクトル効果を使用して、ヘアラインを薄く保つ

08.ビットマップを覚えておいてください

09.適応解を考える

10.メディアクエリをSVGに統合します

結論

操作方法 - 最も人気のある記事

塗装のためにマルスティックを作って使用する方法

ユーザーフレンドリーなWebフォームを作成するための10の規則

あなたのVRアートをレベルアップする

インタラクティブな視差画像を作成する

物語を伝えるカラフルな世界を作る方法

Scratchからeコマースサイトを構築する

魔法の輝くルーンを描く方法

デジタルテクスチャからのもっと得る方法

カテゴリ