lastfuture Posted May 5, 2017 Share Posted May 5, 2017 Hi, I'd like to propose additional export options for exporting SVG from Affinity Designer that would be very helpful for inline web-use. Right now, when I have a shape that is part of a dashboard and I export SVG for web this is the result: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 231 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <rect id="Artboard1" x="0" y="0" width="231" height="272" style="fill:none;"/> <clipPath id="_clip1"> <rect x="0" y="0" width="231" height="272"/> </clipPath> <g clip-path="url(#_clip1)"> <path d="M31,48l-75,84l192,140l83,-116l-50,-156l-74,109l-76,-61Z"/> </g> </svg> this is great for loading SVG into a website as img src attribute or using CSS, however more often than not I find myself needing to use SVG inline, i.e. directly in my html In that case an output that would help me much more would be: <svg width="231" height="272" viewBox="0 0 231 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <path d="M31,48l-75,84l192,140l83,-116l-50,-156l-74,109l-76,-61Z"/> </svg> Instead of having to edit my SVGs by hand, I'd love if I could achieve the above export by setting the following options, that do not yet exist: [_] export artboard as clipping path [_] include XML declaration and doctype [x] set absolute width and height (the default would then be the inverse of my selections) Please consider adding these in the advanced SVG export settings Cheers -- Alina Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted May 5, 2017 Staff Share Posted May 5, 2017 Hi Alina, Regarding the third, when exporting to SVG, click the More button and uncheck Set viewbox, or am i missing something here? Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
VIPStephan Posted May 5, 2017 Share Posted May 5, 2017 No, viewBox and width and height are two different things. The viewBox sets the corrdinate system and basically the “viewport” (the visible area of the graphic) while the SVG element itself can have a different width and height. I also find myself always opening the SVGs in code editor and adding an absolute width and height because the 100% values can cause issues with default sizing of SVGs (embedded via <object>) in Internet Explorer. It’s usually the best to have absolute values in the width and height attributes. Quote Link to comment Share on other sites More sharing options...
lastfuture Posted May 5, 2017 Author Share Posted May 5, 2017 actually unchecking Set Viewbox may help in my case, thanks. It sets the width and height and in turn removes the viewbox attribute. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.