在html中调整SVG的大小?

时间:2010-06-25 19:05:27

标签: html svg

所以,我有一个HTML格式的SVG文件,我听说过这个格式的一个原因是当你放大它时它不会全部像素化。

我知道用jpeg或其他任何东西存储为50乘50的图标,然后实际显示为(相当像素化)100×100缩略图(或10乘10),通过手动设置高度和宽度在image_src标签中。

但是,SVG文件似乎与object / embed标签一起使用,并且更改THOSE的高度或宽度只会为图片分配更多空间。

有没有办法指定您希望SVG图像的显示小于或大于实际存储在文件系统中的值?

8 个答案:

答案 0 :(得分:153)

使用文本编辑器打开您的.svg文件(它只是XML),并在顶部查找类似的内容:

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

擦除宽度和高度属性;默认值为100%,因此它应该延伸到容器允许的任何值。

答案 1 :(得分:41)

试试这些:

  1. 设置缺少的视图,并在svg标记中填写设置的高度和高度属性的高度和宽度值

  2. 然后只需将设置高度和宽度缩放到所需百分比值即可缩放图片。祝你好运。

  3. 使用preserveAspectRatio="X200Y200 meet(例如200像素)设置固定宽高比,但不一定

  4. e.g。

     <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">
    

答案 2 :(得分:20)

您可以通过在图片标签和尺寸图片标签中显示svg来调整大小,例如

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

答案 3 :(得分:9)

更改容器的宽度也会修复它,而不是更改源文件的宽度和高度。

.SvgImage img{ width:80%; }

这解决了重新调整svg大小的问题。你可以根据你的要求给出任何%。

答案 4 :(得分: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);

答案 5 :(得分:1)

使用以下代码:

<g transform="scale(0.1)">
...
</g>

答案 6 :(得分:0)

  

我有一个HTML [....] SVG文件,是否可以指定您要显示的SVG图像小于或大于实际存储在文件系统中的SVG图像?

SVG图形与其他创意作品一样,在大多数国家/地区都受到版权法的保护。视司法管辖权,作品许可或您是否是版权所有者而定,无论是否相信,violating copyright law都可能无法修改SVG。

但是法律是棘手的话题,有时您只是想把事情搞砸。因此,您可以adjust the scale使用HTML中的带有img属性的width标签,而无需修改作品本身。{p}

使用外部HTTP请求指定大小:

<img width="96" src="/path/to/image.svg">

使用Data URI指定标记的大小:

<img width="96" src="data:image/svg+xml,...">

SVG可以Optimized for Data URIs来创建适合任何大小的SVG Favicon图像:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">

答案 7 :(得分:0)

我发现最好在我的SVG中添加viewBoxpreserveAspectRatio属性。视图框应以0 0 w h的形式描述SVG的完整宽度和高度:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>