1. 首頁
  2. 問答
  3. 如何在網頁中使用.svg文件？

如何在網頁中使用.svg文件？

2010-01-06 58 views

回答

5

http://www.w3schools.com/svg/svg_inhtml.asp

最好的例子：

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml" 
pluginspage="http://www.adobe.com/svg/viewer/install/" />

來源

2010-01-06 06:30:58

+0

會其實這顯示在任何SVG圖像瀏覽器嗎？ 謝謝？ – Parastar 2010-01-06 06:35:02

+0

它應該顯示在所有主流瀏覽器上。 – 2010-01-06 06:52:01

+1

謝謝， 但什麼是'pluginspage'的全部？ 跟不上那個？ – Parastar 2010-01-06 07:03:13

2

Raphaël—JavaScript Library。很好的JavaScript庫，使用SVG，並給你一個大範圍的影響！

而且支持大多數的瀏覽器，包括IE

來源

2010-01-06 07:27:55

40

見svgweb quickstart和svgweb project homepage的東西，在所有的瀏覽器包括IE工程（需要安裝Flash插件）。

方法有很多種，包括現有的SVG文件：

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>

來源

2010-01-06 08:15:54

+3

我的最愛不在此列表中，只需在文本編輯器中打開您的svg並將其內容內聯到您的html文檔中，這將允許您應用過濾器並使用css設置svg圖像的樣式。 – chrisweb 2013-09-23 21:02:59

+2

@chrisweb也可以使用''。請參閱http://css-tricks.com/using-svg/上的「使用SVG作爲」。 – 2014-07-05 19:10:07

+0

@chrisweb這是如何處理背景圖片？ – 2016-02-27 15:50:22

17

如果您只想放置SVG圖像（例如徽標或靜態圖），則只需要小心爲舊版Internet Explorer提供回退（即，版本8和更早版本）。

我發現的最好和最簡單的方法是使用.png或.jpg作爲您的後備，使用正常的img標籤放置。然後，將img標記包裹在對象標記中，使用data屬性放置SVG。

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"> 
    <img src="/path-to/your-fallback-image.png" /> 
</object>

img後退僅在瀏覽器不理解SVG時才加載和使用。

來源

2012-10-30 04:09:32 Caspar

+0

或者將後備代碼移入CSS本身 – Jerome 2013-12-20 13:22:57

1

我想同意「code-zoop」的答案。雖然這在技術上不能回答你的問題，但它也可能是一個解決方案：直接在HTML中輸入相關數據。直接作爲svg元素，或者使用Raphaël-JS。

從W3C標準的學校：

SVG是所有支載於在Firefox，Internet Explorer 9中，谷歌Chrome， Opera和Safari可以

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red"/> 
</svg> 

</body> 
</html>

（報價結束）

爲了在盒子外面更加思考，根據您的使用方式，您還可以將您的單色圖案放入webfont。 （請參閱iconmoon.io）

來源

2013-03-06 06:52:14 Ideogram

2

我建議將svg嵌入到文檔中（html5技術）。只需打開SVG文件，複製SVG標籤和其中的所有內容，然後將其粘貼到您的html文檔中。

<html> 
    <body> 
     <svg></svg> 
    </body> 
</html>

它的優點是可以使用css來設置它的樣式，例如更改填充顏色或將濾鏡應用爲模糊。另一個優點是，如果它存在於文檔中，則可以保存一個用於獲取svg文件的http請求。

如果你想要例如使用css改變它的位置，那麼你必須把css放在style屬性中。在外部CSS文件中的樣式不會在大多數瀏覽器中應用，因爲這是一個安全限制。例如：

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

除了IE8及以下版本以及android 2.3瀏覽器及以下版本，所有瀏覽器都支持此技術。

瞭解更多詳細信息，章聯SVG：

，如果你不想把它內嵌在您的網頁，則最好的選擇似乎是對象標記並避免使用嵌入標記。

閱讀本有關對象VS嵌入VS img標籤的詳細信息：

來源

2013-09-23 21:00:40 chrisweb

+0

您知道一種將此自動化的方法嗎？而不是從SVG文件複製並粘貼到您的HTML，是否有一個咕嚕插件或可以注入到您的網頁？ – 2014-04-07 15:23:57

+0

不知道從未聽說過這樣的插件，但也許它存在 – chrisweb 2014-04-19 17:28:10

2

卡斯帕的做法是正確的。不過，我會回退移動到CSS，因爲你可能希望將一些樣式應用到SVG文件本身...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>

CSS

.no-svg .logo { 
    width: 99px; 
    height: 99px; 
    background-image: url(/path-to/your-png-image.png); 
}`

來源

2013-12-20 13:26:58 Jerome

相關問題

 相關問題