用ChatGPT解决这个技术问题 Extra ChatGPT

Resizing SVG in html?

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?

A
Amadan

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.

Yes that's right, but you also need to add a 'viewBox' attribute (e.g viewBox="0 0 50 50" in your 50x50px example), otherwise the content might not scale properly (will depend on the container dimensions). Scour will do this for you automatically, codedread.com/scour.
Hooray! That helped! I already had things at 100% in the file, it turns out, but the view box was the key! Thank you both!
In case it's not obvious to anyone else, 'viewBox' is case sensitive. Also, the first two coordinates are the upper-left corner if you're cropping the image, and the second two coordinates are the width and height before scaling.
Note that both
...
and ... will work.
To complement the answers from @ErikDahlström and widged, you can go to the official site of Developers Mozilla and see the full documentation for viewBoxes. The 4 values are min-x, min-y, width and height, latter 2 can accept negative parameters.
C
Community

Try these:

Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag Then scale the picture simply by setting the height and width to the desired percent values. Good luck. Set a fixed aspect ratio with preserveAspectRatio="X200Y200 meet (e.g. 200px), but it's not necessary

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

you can resize it by displaying svg in image tag and size image tag i.e. 

<img width="200px" src="lion.svg"></img>
The problem I think with using is that you lose the failover capabilities of the tag (which might be relevant for IE users on version 8 and below).
nobody wants to use IE anymore
d
duhaime

I have found it best to add viewBox and preserveAspectRatio attributes to my SVGs. The viewbox should describe the full width and height of the SVG in the form 0 0 w h: 

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>
This is the best option honestly. Works like a charm.
Doing this as well as adding width="100%" and height="100%" worked perfectly for me.
C
Chris P

Use the following code: 

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

Changing the width of the container also fixes it rather than changing the width and height of source file. 

.SvgImage img{ width:80%; }

This fixes my issue of re sizing svg . you can give any % based on your requirement.

w
waldyrious

Here is an example of getting the bounds using svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

At the end you get numbers that you can plug into the svg to set the viewbox properly. Then use any css on the parent div and you're done. 

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

I have an SVG file in HTML [....] 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?

SVG graphics, like other creative works, are protected under copyright law in most countries. Depending on jurisdiction, license of the work or whether or not you are the copyright holder you may not be able to modify the SVG without violating copyright law, believe it or not.

But laws are tricky topics and sometimes you just want to get shit done. Therefore you may adjust the scale of the graphic without modifying the work itself using the img tag with width attribute within your HTML.

Using an external HTTP request to specify the size: 

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

Specifying size in markup using a Data URI: 

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

SVGs can be Optimized for Data URIs to create SVG Favicon images suitable for any size: 

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

关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now

HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.

简体中文 English

Platform

Support

Links

Contact US

Any questions or suggestions during use, you can contact us in the following ways:

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.