Jump to content

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

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.