Jump to content

SVG export for Web (responsive)

Recommended Posts

Just purchased AD and spent some time test-driving it -- feels nice, intuitive UI. Personally, I was very interested in SVG export for web work and I was happy to see it under the supported formats. Having done a quick test, it certainly worked but I had to edit the SVG file afterwords to get it working 'responsively' (sized via CSS, using percentages).


Currently, the SVG is exported with its size determined by the 'width' and 'height' attributes. For example, an object defined as 50x50px object will have width="50" height="50" baked in. By replacing these attributes with viewBox="0 0 50 50", the size can now can be controlled using CSS, e.g., svg { width:100%; }


It's an easy manual fix but it would be great to have the option setting available during export..

Link to comment
Share on other sites

There might be cases where you don't want the viewbox to be the same size as the graphic - or you'd want to set the x and y values. I'm wondering whether the the approach should be to let the user control the viewbox prior to export. It would be nice to be able to do that by dragging and resizing the 'viewbox' rather than trial-and-error entering  values manually in a text editor. Oh and it would be great to specify how the viewbox should deal with scaling. 


But I appreciate you have a gazillion other priorities.

Link to comment
Share on other sites

  • 2 months later...

Actually, I use SVGs with SoftPress Freeway (web design app) and find that Illustrator-generated SVGs lack HEIGHT and WIDTH attributes which make the SVGs have problems in Freeway (when used with Freeway's "SVG Image" action).  The Illustrator SVGs display in-browser, but the problem is that Freeway auto-creates a fallback image (JPG/GIF/PNG -- your choice) for SVGs and that fallback image isn't generated if the SVGs HEIGHT & WIDTH tags are missing.  So I either have to use a text editor to hack in those two tags or bring the SVG into Affinity Designer and then export it (which nicely exports the Height & Width tags).  The only problem with using Affinity Designer to do this is that Affinity exports slightly larger SVGs than Illustrator does (yes, I am choosing "Export for Viewing").


Another issue is that I sometimes open an SVG and see whitespace surrounding the vector content.  I know I can click the Document setup button in Affinity to shrink the artwork/artboard area to the dimensions of the artwork, but it's fiddly.  It would be wonder to have a one-click means of shrinking the artboard to the artwork size.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.