在html中调整SVG大小？ [英] Resizing SVG in html?

问题描述

所以，我有一个HTML格式的SVG文件，我听说过这种格式的一个特性，就是当你放大它时，它不会像素化。

我知道用jpeg或任何我可以将它存储为50乘50的图标，然后实际将其显示为（相当像素）100乘100缩略图（或10乘10），通过手动设置image_src标签中的高度和宽度。

然而，SVG文件似乎与object / embed标签一起使用，并且改变THOSE的高度或宽度只会产生更多空间分配给图片。

是否有任何方法可以指定您希望显示的SVG图像小于或大于实际存储在文件系统中？

解决方案

使用文本编辑器（它只是XML）打开 .svg 并在上面寻找这样的东西：

 < svg ... width =50pxheight =50px ... 
  

清除宽度和高度属性;默认值是100％，所以它应该延伸到容器允许的范围内。

So, I have an SVG file in HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it.

I know with a jpeg or whatever I could have it stored as a 50 by 50 icon, then actually display it as a (rather pixelated) 100 by 100 thumbnail (or 10 by 10), by manually setting the height and width in the image_src tag.

However, SVG files seem to be used with object/embed tags, and changing the height or width of THOSE just results in more space being allocated for the picture.

IS there any way to specify that you want an SVG image displayed smaller or larger than it actually is stored in the file system?

解决方案

Open your .svg file with a text editor (it's just XML), and look for something like this at the top:

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

Erase width and height attributes; the defaults are 100%, so it should stretch to whatever the container allows it.

这篇关于在html中调整SVG大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！