SVGを備えたCSS：Real Worldの使用

svg：CSSでのスタイリングと操作に深く飛び込みます

Scalable Vector Graphics（SVG）は、Webグラフィックスに最適な軽量のXMLベースのベクトル画像形式です。 インタラクティブ性とアニメーションのサポートは、優れたブラウザの互換性（IE9以降）と相まって、最新のWeb開発のための強力なツールになります。この記事では、SVGをスタイリングおよび操作するためにCSSを活用し、Webデザインの汎用性を高めます。

SVGの重要な利点

スケーラビリティ：

ラスター画像（PNG、JPG、GIF）とは異なり、SVGはあらゆるサイズでパリスネスを維持し、ロゴやアイコンに最適です。
• cssスタイリング：CSSを使用してDOM内のSVG要素を直接スタイルと操作し、動的な相互作用を可能にし、複数のSVGにわたって一貫したスタイリング。
• svgスプライト：複数の画像を単一のファイルに統合し、HTTPリクエストを減らしてキャッシュを改善することでパフォーマンスを最適化します。
高度な機能：スタンドアロンSVGファイル内のアニメーションとインタラクティブ性のサポートは、単純なグラフィックを超えてアプリケーションを拡張します。
• なぜsvgsがビットマップを上回るビットマップ形式は、ピクセルごとに画像カラーピクセルを定義します。 小さな画像には数千ピクセルが必要であり、圧縮後でもファイルサイズが大きくなります。 ビットマップの拡大はピクセル化につながります ベクトルベースであるSVGSは、ポイント、線、曲線を使用して画像を定義します。これにより、ファイルサイズが大幅に小さくなり、スケーラビリティが優れています。 たとえば、SVGの単純な円は、はるかに大きい同等のPNGまたはJPGと比較して150バイト未満である可能性があります。 さらに、SVGの背景は本質的に透明です。 XML構造は、アクセシビリティとSEOも強化します
• svg作成ツール

基本的なSVG図面を理解することは有益であり、特殊なツールは複雑な形状の作成と生成コードの作成を簡素化します。

コマーシャル：

Adobe Illustrator、Affinity Designer、Sketch

オープンソース：

inkscape

オンライン（無料/コマーシャル）：

Gravit Designer、Vectr、SVG-Edit、Boxy SVG、Vecteezy

ライブラリのチャート：
• JavaScriptを使用してデータからSVGチャートを生成します SVGOやSVGOMGなどのツールは、小さいファイルサイズの生成されたSVGコードをさらに最適化できます。 SVGを静的画像として使用して
ただし、SVG内のインタラクティブな要素は無効になっています。 CSS変換とフィルターを適用でき、多くの場合、ビットマップスケーリングに優れた結果をもたらします。 CSSの
• inlided svgバックグラウンド
背景画像としてCSSに直接SVGをインランスすることは、小規模で再利用可能なアイコンに効率的であり、追加のHTTPリクエストを回避します。

PostCSSアセットプラグインなどのツールは、このプロセスを合理化します。

.myelement {
  background-image: url("mybackground.svg");
}

レスポンシブSVG画像

レスポンシブデザインの場合、サイジングの問題を防ぐために、デフォルトの幅と高さがタグ内で定義されていることを確認してください：

次に、CSS：<svg>を使用します

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg"><circle cx="400" cy="300" fill="#ff0" r="50" stroke="#f00" stroke-width="5"></circle></svg>') center center no-repeat;
}

htmlインラインドSVG画像

<svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg>

svgをHTMLに直接埋め込むと、DOMの一部になり、CSSとJavaScriptの操作が可能になります：

CSSは、特定のSVG要素をターゲットにできます

これにより、

、遷移、アニメーションを使用した動的スタイリングが可能になります。

img {
  display: block;
  max-width: 100%;
  height: auto;
}

svgスプライト：効率的なアイコン管理

<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8">
  <path d="..."></path>
</svg>

:hover要素を使用して、複数のアイコンを単一のSVGファイルに結合します：

要素を使用して、HTML：

のアイコンを参照してください

<symbol>これによりパフォーマンスが向上しますが、クロスブラウザーの互換性と効率的なキャッシングには慎重に処理する必要があります。 Ajaxの荷重や注入などの手法は、これらの課題に対処できます。

#invader {
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}

HTMLコンテンツ（マスク、クリッピング、フィルター）にSVG効果

<use>

CSS

<svg>
  <defs>
    <symbol id="icon-folder" viewBox="0 0 32 32">...</symbol>
  </defs>
</svg>

、

、および

プロパティをレバレッジして、マスキング、クリッピング、視覚フィルターなどの効果をSVG要素に適用します。 CSS内のSVG要素を参照すると、複雑な視覚操作が可能になります。

埋め込まれたインタラクティブ性を備えたスタンドアロンSVG

Standalone SVGファイルには、CSS、JavaScript、さらにはビットマップを含めることができ、自己完結型のインタラクティブなグラフィックスを作成できます。 これにより、外部リソースに依存せずにインタラクティブコンテンツを配布できます。 maskclip-path結論filter

CSSと組み合わせた

SVGは、Webグラフィックスに強力で効率的なアプローチを提供します。 その汎用性は、単純な静的画像から複雑でインタラクティブなアニメーションにまで及び、Webデザインを強化するための多くの可能性を提供します。

以上がSVGを備えたCSS：Real Worldの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。