Jump to content
jcdickinson

Export Artboards as SVG Symbols (Sprite/Icon Sheets)

Recommended Posts

This would be a great feature for people using Affinity to create SVG web icons. SVG supports symbols, which are basically re-usable bits of SVG. For example, given this SVG file:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="artboard1" width="10" height="10" viewBox="0 0 10 10">
    <circle cx="5" cy="5" r="5" />
  </symbol>
</svg>

You can use it in a page as follows:

<a class="button">
  <svg class="icon"><use href="/images/icons.svg#artboard1" /></svg>
  <span class="text">A button with a circle.</span>
</a>

Currently, Affinity exports artboards as transparent rects with an id when exporting an entire document. It would be awesome if we could instruct it to export it artboards as SVG symbols (like the first example), effectively turning Affinity Designer into an end-to-end sprite/icon sheet editor.

Bonus feature: an option to export artboard names (outside the symbol element, positioned near it), so that the same sprite/icon sheet can be used for documentation (example: font-awesome).

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.