具有SVG的CSS：現實世界使用

svg：深入研究CSS

>的樣式和操縱

可伸縮矢量圖形（SVG）是一種基於XML的輕巧矢量圖像格式，非常適合Web圖形。 它對交互性和動畫的支持，再加上出色的瀏覽器兼容性（自IE9以來），使其成為現代網絡開發的強大工具。本文探討了CSS風格和操縱SVG的利用，從而增強了其在網絡設計中的多功能性。

> svg的關鍵優點

• >可伸縮性：與柵格圖像（PNG，JPG，GIF）不同，SVGS保持清晰度的任何尺寸，非常適合徽標和圖標。 > >
CSS樣式：
• 使用CSS在DOM中直接樣式並操縱SVG元素，從而啟用動態交互並在多個SVG上進行一致的樣式。 svg Sprites：
>將多個圖像合併到一個文件中，通過減少HTTP請求並改善緩存來優化性能。 >
• 高級功能：支持動畫和獨立SVG文件中的互動性的支持將其應用程序擴展到簡單的圖形之外。
• >為什麼svgs勝過位圖

>

>位圖格式通過像素定義圖像顏色像素。 一個小圖像需要數千個像素，即使在壓縮後也會產生較大的文件尺寸。 放大位圖導致像素化。 基於向量的SVGS，使用點，線和曲線定義圖像。這會導致較小的文件大小和卓越的可擴展性。 例如，與更大的等效PNG或JPG相比，SVG中的簡單圓圈可能低於150個字節。 另外，SVG背景本質上是透明的。 XML結構還可以增強可訪問性和SEO。

svg創建工具

雖然了解基本的SVG圖是有益的，但專門的工具簡化了創建複雜形狀並生成代碼：：

商業： Adob​​e Illustrator，親和力設計師，素描

開源： inkscape

在線（免費/商業）：
• ：吸引人設計師，Vectr，SVG-Edit，Boxy Svg，Vecteezy
• 圖表庫：使用JavaScript從數據中生成SVG圖表。
SVGO和SVGOMG之類的工具可以進一步優化針對較小文件尺寸的生成的SVG代碼。
• 使用svgs作為靜態圖像
• > >
但是，SVG中的交互元素被禁用。 可以應用CSS變換和過濾器，通常會產生比位圖縮放的較高結果。 CSS

中的svg背景

>直接在CSS中插入SVG，因為背景圖像對於可重複使用的小圖標有效，避免了額外的HTTP請求：

<code class="language-css">.myelement {
  background-image: url("mybackground.svg");
}</code>

> PostCSS Assets插件之類的工具簡化此過程。 >

>響應式SVG圖像

對於響應式設計，請確保在標籤中定義默認寬度和高度以防止尺寸問題：>

然後使用CSS：<svg></svg>

<code class="language-css">.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;
}</code>

html啟用的SVG圖像

<code class="language-html"><svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg></code>

將SVG直接嵌入HTML使其成為DOM的一部分，允許CSS和JavaScript操縱：

> 然後，CSS可以靶向特定的SVG元素：>

這允許使用

，過渡和動畫進行動態樣式。

>

<code class="language-css">img {
  display: block;
  max-width: 100%;
  height: auto;
}</code>

SVG Sprites：有效的圖標管理

<code class="language-html"><svg id="invader" xmlns="https://www.w3.org/2000/svg" viewbox="35.4 35.4 195.8 141.8">
  <path d="..."></path>
</svg></code>

>將多個圖標組合到單個SVG文件中，使用:hover元素：

使用>在html中引用圖標：

這可以提高性能，但需要仔細處理跨瀏覽器的兼容性和有效的緩存。 諸如Ajax加載和注入之類的技術可以解決這些挑戰。 <symbol></symbol>>

<code class="language-css">#invader {
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}</code>

> SVG對HTML內容的影響（掩模，剪輯，過濾器）

<use></use>>

>利用CSS

<code class="language-xml"><svg>
  <defs>
    <symbol id="icon-folder" viewbox="0 0 32 32">...</symbol>
  </defs>
</svg></code>

，和屬性，以將屏蔽，剪切和視覺過濾器等效果應用於SVG元素。 CSS中引用SVG元素允許進行複雜的視覺操作。 帶有嵌入式互動性的獨立SVG

>獨立的SVG文件可以包括CSS，JavaScript甚至位圖，創建獨立的交互式圖形。 這允許在不依賴外部資源的情況下分發交互式內容。 >

結論

mask 與CSS結合使用clip-path> SVG，為Web圖形提供了強大而有效的方法。 它的多功能性從簡單的靜態圖像擴展到復雜的交互式動畫，提供了許多增強Web設計的可能性。

以上是具有SVG的CSS：現實世界使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！