ChatGPT解决这个技术问题 Extra ChatGPT

在 html 中调整 SVG 的大小?

所以,我有一个 HTML 格式的 SVG 文件,我听说过的关于该格式的一件事是,当您放大它时,它不会全部像素化。

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

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

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


A
Amadan

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

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

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


是的,没错,但您还需要添加一个“viewBox”属性(例如,在您的 50x50px 示例中,viewBox="0 0 50 50"),否则内容可能无法正确缩放(取决于容器尺寸)。 Scur 会自动为您执行此操作,codedread.com/scour
万岁!这有帮助!事实证明,我已经在文件中有 100% 的内容,但视图框是关键!谢谢你们俩!
如果其他人不明白,“viewBox”区分大小写。此外,如果您正在裁剪图像,前两个坐标是左上角,后两个坐标是缩放前的宽度和高度。
注意
...
... 会起作用。
要补充来自 @ErikDahlström 和 widged 的答案,您可以访问 Developers Mozilla 的官方网站并查看 viewBoxes 的完整文档。 4个值分别是min-x、min-y、width和height,后2个可以接受负参数。
C
Community

试试这些:

设置缺少的viewbox并在svg标签中填写设置的height和height属性的height和width值然后只需将height和width设置为所需的百分比值即可缩放图片。祝你好运。使用 preserveAspectRatio="X200Y200 meet (eg 200px) 设置固定的纵横比,但这不是必需的

例如

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

T
Tanveer

您可以通过在图像标签和大小图像标签中显示 svg 来调整它的大小,即

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

我认为使用 的问题是您失去了 标记的故障转移功能(这可能与版本 8 及以下版本的 IE 用户相关)。
没人想再用IE了
d
duhaime

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

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

老实说,这是最好的选择。奇迹般有效。
这样做以及添加 width="100%"height="100%" 对我来说非常有效。
C
Chris P

使用以下代码:

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

n
neuro_tarun

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

.SvgImage img{ width:80%; }

这解决了我调整 svg 大小的问题。您可以根据您的要求给出任何百分比。


w
waldyrious

以下是使用 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);

v
vhs

我有一个 HTML 格式的 SVG 文件 [....] 有没有办法指定您希望显示的 SVG 图像比文件系统中实际存储的图像更小或更大?

SVG 图形与其他创意作品一样,在大多数国家都受到版权法的保护。根据司法管辖区、作品许可或您是否是版权所有者,您可能无法在没有 violating copyright law 的情况下修改 SVG,信不信由你。

但法律是棘手的话题,有时你只想把事情搞定。因此,您可以在您的 HTML 中使用带有 width 属性的 img 标记来adjust the scale 图形而不用修改作品本身。

使用外部 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">