Resizing SVG in html

Question

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

User · Accepted Answer

Open your  svg file with a text editor  it s just XML   and look for something like this at the top    lt svg     width  50px  height  50px       Erase width and height attributes  the defaults are 100   so it should stretch to whatever the container allows it

User · Answer

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

User · Answer

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

User · Answer

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    lt svg preserveAspectRatio  xMidYMid meet  viewBox  0 0 700 550  gt  lt  svg gt

User · Answer

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    lt img width  96  src   path to image svg  gt    Specifying size in markup using a Data URI    lt img width  96  src  data image svg xml      gt    SVGs can be Optimized for Data URIs to create SVG Favicon images suitable for any size    lt 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  gt

User · Answer

you can resize it by displaying svg in image tag and size image tag i e    lt img width  200px  src  lion svg  gt  lt  img gt

User · Answer

Use the following code    lt g transform  scale 0 1   gt       lt  g gt

User · Answer

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     lt 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  gt

[html] Resizing SVG in html?

Examples related to html

Examples related to svg