jquery - SVG image scale? For mobile applicatios -


I've read a lot of resources, but I can not seem to fit SVG images in the browser window.

I was told that if I want to use pictures in mobile applications that fit in modern mobile browsers, then I have to use SVG images in html5 pages.

I do not think SVG image works! I am saving it from the painter, then embedding it in the html5 page 100% width.

What is the best way to do this? Thanks for any help ..

Anyway, I would like to see Junkery Mobile / HTML5 / CSS3

  & lt; Embed src = "header.svg" type = "image / svg + xml" codebase = "http://www.adobe.com/svg/viewer/install" />   

How do I specify a certain width and height in the "view box" when I want to fit it into the tool size? I do not have a specific size

  & lt ;? Xml version = "1.0" encoding = "UTF-8"? & Gt; & Lt ;! - Generator: Adobe Illustrator 15.0.0, SVG Export Plug-in SVG Version: 6.00 Build 0) - & gt; & Lt ;! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 Basic // N http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd"> & Lt; Svg version = "1.1" baseprofile = "root" id = "layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1 99 0 / xlink "x =" 0px "y =" 0px "width =" 253px "height =" 60px "visible box =" 0 0 253 60 "xml: space =" protected "& gt; & Lt; Ch & gt; & Lt; Ch & gt; & Lt; Defs & gt; ............    

If your audience has a Used browser with HTML 5 parser (), you do not need XML stuff directly in any SMG tag. You do not need an object or embed tag tag at this point, this is the old school and you do not need iFrame Certainly . Besides, just to clarify, some of the SVG's with jQuery Not to do, (really jquery svg elements plays fairly badly with elements). Just make sure you are using html5 doctype, and write it like this:

  & lt; Svg id = "mycoolgraphic" viewBox = "0 0 253 60" & gt; & Lt; Ch & gt; & Lt; Ch & gt; & Lt; Defs & gt; ............ & lt; / G> & Lt; / G> & Lt; / Svg & gt;   

Make sure that all your tags are off, and are valid as xml, do not indent tabs or add a whole bunch of spaces, so that only empty text nodes will be created Leave ugly and beaten together. This makes any Javascript work very easy afterwards. If you are using Illustrator (which is still fine), you might want to clear some XML announcements outside of some SMG tags by going in. Leave any clear height and width if you want the element to be responsive. You can control the height and width through simple CSS declarations:

 > mycoolgraphic {height: 10em, width: 10em}}   

responsive In doing the main move Svg setting is setting the setting shelf line attribute. You must add something. (Nothing will be included for preserveAspectRatio in Graphics exported from Illustrator.) This feature controls that svg content ( view box ) SVG element (SVG Viewport ). The viewbox is proportionally fixed when you make the artist in painting, then this boundary was rectangle, do not mess with it unless you are absolutely sure that you know what you are doing SVG element in the viewbox, However, any HTML element can be shaped like this, and the preserveAspectRatio describes the relationship between the two attributes. The article on PreserveAspectRatio is good, it is also amazingly readable at this point.

Hope it helps!

Comments