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

SVG Export


Andy

Recommended Posts

Hi, new guy here. o/ I recently purchased and started using both Photo and Designer after having used Photoshop and Illustrator for many many years, not a heavy user but I know my way around it. Will take a while before I can switch completely, but I like the direction of both Affinity tools. Keep up the good work!

 

First thing I tried with Designer is port some of the assets from AI and use Export Persona for exporting both PNG and SVG. While PNG works fine, SVG not so much. I've searched the forum, but wasn't able to find a concrete answer. Hence this topic.

 

1. Ability to retain width and height of the artboard as well as the viewbox. Checking off `Set viewbox` option in the export setting does set the height and width attributes, but it also removes the viewbox property, which is not ideal. For example AI handles this through `Responsive` setting in SVG export options; checking it removes width and height, otherwise both are always present.

 

2. Output SVG contains unwanted (unnecessary perhaps?) clipping elements and references and an empty artboard rect. In the below example only `<path />` is wanted and none of the other stuff. I imagine this is necessary if the slice is smaller than the artboard. But this is exactly what `viewbox` is for — to clip unwanted areas of an SVG.

 

3. Presentational attributes: `fill="#ebebeb"` instead of `style="fill:#ebebeb;"`. I do believe this was mentioned in one of the topics I found, but there was no clear answer to the issue. Perhaps something similar to AI SVG options where you can select how you want those properties to be exported.

 

4. Long-shot, but perhaps something similar to SVGO for minification.


<svg width="100%" height="100%" viewBox="0 0 200 200" 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="200" height="200" style="fill:none;" />
    <clipPath id="_clip1">
        <rect id="Artboard11" x="0" y="0" width="200" height="200" />
    </clipPath>
    <g clip-path="url(#_clip1)">
        <path d="..." style="fill:#ebebeb;" />
    </g>
</svg>
Link to comment
Share on other sites

  • 1 month later...

I want to second Andy's request to clean up the SVG output. I end up manually editing the SVG code to remove unnecessary elements. That's simple enough for simple drawings, but becomes very cumbersome on complicated ones.

 

My preferred output would be 

<svg ... >
  <path ... >
  <path ... >
   ... etc
</svg>

I'm not sure why all the grouping and transforming and clipping is going on. I'd love the ability to remove them.

 

I also second Andy's compliments to the developers. I've been using Designer intermittently for over a year and swear by it. Keep it up!

 

Thanks,

~Stephen

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
  • 1 year later...

It would be wonderful if there were an option to post-process SVG export with SVGO. Running an SVG from Affinity Designer through this typically reduces the file size by about a quarter.

In the meantime, ImageOptim added support for SVGCleaner in its most recent update. It also has SVGO as an option – but it must be specifically enabled in the preferences, and you need to install Node.js for it to work (which can be done easily with Homebrew).

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.

Guest
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.

Loading...
×
×
  • 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.