我有一个HTML格式的SVG文件,我听说过的一件事是,当你放大它时,它不会完全像素化。
我知道jpeg或任何我可以将它存储为50 * 50的图标,然后实际显示为(相当像素化)100 * 100的缩略图(或10 * 10),通过手动设置image_src标签的高度和宽度。
然而,SVG文件似乎是与object/embed标签一起使用的,改变这些标签的高度或宽度只会导致为图片分配更多的空间。
有什么方法可以指定您想要SVG图像显示的比它实际存储在文件系统中的更小或更大?
我有一个HTML格式的SVG文件,我听说过的一件事是,当你放大它时,它不会完全像素化。
我知道jpeg或任何我可以将它存储为50 * 50的图标,然后实际显示为(相当像素化)100 * 100的缩略图(或10 * 10),通过手动设置image_src标签的高度和宽度。
然而,SVG文件似乎是与object/embed标签一起使用的,改变这些标签的高度或宽度只会导致为图片分配更多的空间。
有什么方法可以指定您想要SVG图像显示的比它实际存储在文件系统中的更小或更大?
当前回答
使用以下代码:
<g transform="scale(0.1)">
...
</g>
其他回答
改变容器的宽度也可以修复它,而不是改变源文件的宽度和高度。
.SvgImage img{ width:80%; }
这修复了我重新调整svg大小的问题。您可以根据您的要求给出任何%。
用文本编辑器打开你的.svg文件(它只是XML),在顶部寻找如下内容:
<svg ... width="50px" height="50px"...
擦除宽度和高度属性;默认值是100%,所以它应该扩展到容器允许的任何值。
删除svg元素中的高度和宽度属性。添加一个viewBox属性,例如viewBox 00 100 100,然后使用普通的CSS高度或宽度来缩放svg元素。
注意:viewBox属性区分大小写。如果你用小写的b,它是行不通的。
.fifty { 高度:50 px } .hundred { 身高:100像素 } < h3 > 50×50 < / h3 > < >节 <svg class="fifty" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg> . < / >节 100 x100 < h3 > < / h3 > < >节 <svg class="百" viewBox="0 0 100 100"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" fill="black"></path></svg> . < / >节
我有一个SVG文件在HTML [....有什么方法可以指定您想要SVG图像显示的比它实际存储在文件系统中的更小或更大?
SVG图形与其他创意作品一样,在大多数国家都受到版权法的保护。不管你信不信,根据管辖权、作品的许可,或者你是否是版权所有者,你可能无法在不违反版权法的情况下修改SVG。
但法律是个棘手的话题,有时候你只是想把事情办成。因此,你可以在不修改作品本身的情况下,在HTML中使用img标签和width属性来调整图形的比例。
使用外部HTTP请求指定大小:
<img width="96" src="/path/to/image.svg">
使用Data URI在标记中指定大小:
<img width="96" src="data:image/svg+xml,...">
SVG可以为数据uri进行优化,以创建适合任何大小的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">
您可以通过在图像标签和大小图像标签中显示SVG来调整它的大小。
<img width="200px" src="lion.svg"></img>