2010-06-25 304 views
112

所以,我有一個HTML格式的SVG文件,我聽說過這種格式的一個事情就是它在放大時不會全部像素化。在html中調整SVG大小?

我知道一個JPEG或任何我可以它存儲爲50乘50圖標,然後實際顯示爲(相當像素)100乘100縮略圖(或10乘10),手動設置高度和image_src標籤中的寬度。

但是,SVG文件似乎與object/embed標籤一起使用,並且更改THOSE的高度或寬度只會導致爲照片分配更多空間。

是否有任何方法可以指定您希望顯示的SVG圖像小於或大於實際存儲在文件系統中?

回答

125

用文本編輯器打開.svg文件(這只是XML),並期待這樣的事情在頂部:

<svg ... width="50px" height="50px"... 

擦除width和height屬性;默認值是100%,所以它應該延伸到容器允許的範圍內。

+49

是的,這是正確的,但你也需要添加一個「視框」屬性(如視框=「0 0 50 50」在你的50x50px例子),否則內容可能無法正確縮放(將依賴於容器尺寸)。 Scour會自動爲你做這件事,http://www.codedread.com/scour/。 – 2010-06-27 12:54:05

+0

Hooray!這有幫助!我已經在文件中有100%的東西,事實證明,但視圖框是關鍵!謝謝你們倆! – Jenny 2010-06-27 15:28:20

+12

如果對其他人不明顯,'viewBox'區分大小寫。另外,如果您裁剪圖像,前兩個座標是左上角,第二個兩個座標是*縮放前的寬度和高度*。 – 2013-10-18 03:42:06

35

嘗試這些:

  1. 設置失蹤視框,並在設定的高度的高度和寬度值填寫,並在SVG標籤高度屬性

  2. 然後通過簡單的縮放圖片將高度和寬度設置爲所需的百分比值值。祝你好運。

  3. 設置一個固定的寬高比preserveAspectRatio="X200Y200 meet(例如200像素),但它沒有必要

例如

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    width="10%" 
    height="10%" 
    preserveAspectRatio="x200Y200 meet" 
    viewBox="0 0 350 350" 
    id="svg2" 
    version="1.1" 
    inkscape:version="0.48.0 r9654" 
    sodipodi:docname="namesvg.svg"> 
15

可以通過在圖像標記和尺寸圖像標籤即

<img width="200px" src="lion.svg"></img> 
+1

我認爲使用的問題在於,您失去了標記的故障轉移功能(這可能與版本8及以下版本的IE用戶有關)。 – 2012-09-11 03:48:07

6

改變容器的寬度顯示SVG調整其大小也修正它,而不是改變源文件的寬度和高度。

.SvgImage img{ width:80%; } 

這修復我再上漿SVG的問題。你可以根據你的要求給出任何%。

3

這是獲得使用svg.getBox()界限的例子: https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

在你得到,你可以插入SVG正確設置視框號結束。然後在父div上使用任何css,就完成了。

// get all SVG objects in the DOM 
var svgs = document.getElementsByTagName("svg"); 
var svg = svgs[0], 
    box = svg.getBBox(), // <- get the visual boundary required to view all children 
    viewBox = [box.x, box.y, box.width, box.height].join(" "); 

    // set viewable area based on value above 
    svg.setAttribute("viewBox", viewBox);