CODEWITHSUNDEEP
htmlsvg
OctaHeliX
OctaHeliX

Reputation: 69

Embed SVG into HTML

I need to embed a SVG file into HTML file, the SVG's dimensions are bit larger. so, I need the SVG to be re-sized to the screen resolution. Is there any way to do that? Thanks.

Upvotes: 1

Views: 1170

Answers (2)

Alex
Alex

Reputation: 3257

I dont know how complex is that SVG, but at least you can put whole description under one group , and then use transform="scale(SF)" whereas "SF" stands for scaling factor. Default is 1 (100%), so use little script:

 TransFrm = "scale(" + SF + ")";
 yourElement.setAttributeNS(null, "transform", TransFrm);

Or if you mean resizing by viewBox then <rect x="0" y="0" width="100%" height="100%"/>.

Or if you mean something else take a look at: http://janistoolbox.typepad.com/blog/2009/12/svgauto-resize-svg-on-an-html-page.html

Good luck.

Upvotes: 0

Spadar Shut
Spadar Shut

Reputation: 15797

If you want an SVG file to fit in a container the first thing to do is to set a viewBox attribute and remove width and height attributes from the root <svg> element:

<svg viewBox="0 0 100 200" ... >

The values of a viewBox are: x y width height. Read more in the SVG specification.

Upvotes: 2

Related Questions