Jump to content
You must now use your email address to sign in [click for more info] ×

SVG export - responsive and non-responsive

Recommended Posts



I wanted to ask a couple of questions about changes to the export of svgs in the next beta trailed by Matt in this thread:





Just to let you know, I've updated the export code to automatically set the width/height to percentages and add the relevant viewBox. In the next beta version your SVG export should just magically work without requiring fettling! :)


... which left me a little worried. Yes I know I may be jumping the gun, but as that thread is now locked I thought I'd ask here. I'm very much an svg newbie - so apologies if these are questions you've already thought of.


My first question is whether this will be an option. The word 'automatically' left me a little worried - although maybe Matt was writing in a hurry and meant 'automatically, but only if you want it to'. I can see the usefulness of being able to make svg graphics responsive, but equally there are situations when a fixed width may be better: for example, while you might want a masthead graphic to be full-width you might well not want to have a portrait-format graphic expand to full width when say a user turns their tablet from portrait to landscape.


My second question is about specifying widths as percentages (maybe I'm misinterpreting what Matt said here). I'm new to this, but from the very little I know the method recommended by people like Sara Soueidan is to remove the width and height statements from the svg altogether and specify them in the html document (if you need to) depending on what method you are using to embed the svg.


Using percentages in the svg seems to be fraught with pitfalls for people like me:




You probably know all of this, but for anyone else who's interested here's Sara Soueidan (the relevant bit starts at 20:00):



Whatever way you look at it some 'fettling' is going to be involved!


As ever, thanks for your time. Looking forward to the next version.

Link to comment
Share on other sites

  • Create New...

Important Information

Terms of Use | 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.