SVG 入門 及 嵌入HTML的7種方式
      
    
      
        網(wǎng)友投稿
        1033
        2025-04-06
		    
      
    
                    
      SVG簡介

      SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。
      SVG 使用 XML 格式定義圖像。
      SVG與其他圖像格式相比，SVG的優(yōu)勢在于
      SVG 可被非常多的工具讀取和修改（比如記事本）
      SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強(qiáng)。
      SVG 是可伸縮的
      SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
      SVG 可在圖像質(zhì)量不下降的情況下被放大
      SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
      SVG 可以與 Java 技術(shù)一起運(yùn)行
      SVG 是開放的標(biāo)準(zhǔn)
      SVG 文件是純粹的 XML
      一個簡單的SVG實(shí)例
          
      1
      2
      3
      4
      5
      6
      第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規(guī)定此 SVG 文件是否是”獨(dú)立的”，或含有對外部文件的引用。
      standalone=”no” 意味著 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。
      第二行引用了這個外部的 SVG DTD。該 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“。該 DTD 位于 W3C，含有所有允許的 SVG 元素（DTD，即文檔類型定義，作用是定義 XML 文檔的合法構(gòu)建模塊）
      省略該行對顯示并不會有影響。
      SVG 代碼以 元素開始，包括開啟標(biāo)簽 和關(guān)閉標(biāo)簽 。這是根元素。width 和 height 屬性可設(shè)置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
      使用SVG
      SVG可以單獨(dú)顯示
      完整版如上例所示
      最簡的SVG形式，除了“SVG標(biāo)簽”和“xmlns名空間”其他聲明標(biāo)簽均可省略。
        
      1
      2
      3
      SVG可以嵌入HTML中顯示
      嵌入的方式有7種，分別是：
      代碼直接嵌入
      鏈接方式引用
      鏈接方式引用
      CSS的background屬性引用