独自のレスポンシブSVGグラフとインフォグラフィックを作成します

レスポンシブSVGの力を活用してください：コードレベルのコントロールを通じてユーザーエクスペリエンスの向上

この記事では、マークアップを直接操作することにより、より応答性の高いユーザーフレンドリーなスケーラブルなベクターグラフィックス（SVG）を作成する方法について説明します。 実験のためにテキストエディターとcodepen.ioのHTMLパネルを活用します。

SVGの清潔さと効率の向上

クリーナー、よりコンパクトなSVGの場合、繰り返されるインラインプロパティは、HTMLベストプラクティスをミラーリングして、CSSクラスにリファクタリングする必要があります。これにより、読みやすさが向上し、ファイルサイズが削減され、集中スタイル管理が可能になります。 たとえば、これらの繰り返しの要素を考慮してください：

<text></text>これらは、

セクション内のCSSクラスを使用して簡素化できます。

<text> y="430" x="40" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1960>
<text> y="430" x="118" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1965>
<text> y="430" x="196" style="text-anchor: middle; fill: rgb(103, 102, 102); font-size: 12px;"></text>1970>

<defs>要素は次のようになります

このアプローチは、コードの保守性を大幅に向上させ、ファイルサイズを削減します。 同様の手法は、他の反復要素に適用できます。

.y-axis text {
    text-anchor: middle;
    fill: rgb(103, 102, 102);
    font-size: 12px;
}

CSSメディアクエリを使用してレスポンシブSVGを作成<text>

CSSメディアクエリを活用すると、SVGSはさまざまな画面サイズに応答します。 これは、さまざまな解像度で読みやすさを維持するために重要です。 たとえば、画面の幅に基づいてフォントサイズを調整するには：

<text class="y-axis" y="430" x="40">1960</text>
<text class="y-axis" y="430" x="118">1965</text>
<text class="y-axis" y="430" x="196">1970</text>

これにより、小さな画面でもテキストが読みやすくなっていることが保証されます。 メディアクエリ内で

または

を使用して条件付きで隠す要素などのさらなる拡張機能は、より小さなブレークポイントでのレイアウトと読みやすさを改善できます。

セレクターは、特定の要素をターゲットにするためのよりエレガントなアプローチを提供します。

@media (max-width: 500px) {
    .label-startrek, .label-starwars {
        font-size: 170%;
    }
    .y-axis text, .x-axis text {
        font-size: 130%;
    }
}

基本的な応答性を超えてdisplay: none; opacity: 0;レスポンシブSVGは、画面のサイズだけでなく、レイアウト内の位置にも適応します。 利用可能なスペースを埋めるために動的にサイズを変更することができ、インタラクティブな要素や動的なコンテンツに最適です。 これにより、利用可能なスペースに基づいて詳細レベルを調整する適応可能なサムネイルまたはインタラクティブなチャートを作成できます。 :nth-of-type結論

コードレベルの制御を採用し、CSS技術を利用することにより、SVGは非常に応答性の高いユーザーフレンドリーなコンポーネントに変換できます。 codepen.ioとテキストエディターでの実験は、これらの手法を探求し、動的で適応性のあるグラフィックを作成する強力な方法です。 自己完結型の保守可能なファイルのために、SVGのセクションに最終CSSを組み込むことを忘れないでください。

以上が独自のレスポンシブSVGグラフとインフォグラフィックを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。