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

Export to SVG sprite


Recommended Posts

I am adding support for SVG sprites to one of my website frameworks. I'm loving the fact that in AD I can export all the individual icons as SVG in situ from the designs supplied, rather than having to assemble them in their own separate document. Being able to select each layer, create a slice and then adjust that slice's dimensions if I need to is fantastic.

The end result is I get a lot of separate SVG icons.

Then I expended a lot of energy installing Node, Grunt, SVGO, you name it in order to do the following:

  • Optimise the SVG files
  • Create an SVG sprite
  • Copy all the individual icons into the sprite as symbols

I realised it would have been SO much easier if AD (or AP) offered the ability to export selected slices as a sprite. I thought that might be what the Continuous checkbox did, but alas, no.

 

For reference, my starting point for this was this page: https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/, the section beginning HTML INLINE SVG SPRITES (specifically the latter section dealing with external sprite.

 

It would also be advantageous to me if the style="fill:#HEXCOL" could optionally be dropped on each element on export as it prevents styling the elements with CSS.

 

Thanks for making a great app even greater.

Link to comment
Share on other sites

Hi 

That's a great article...Sorry I have no answers here but good luck with making sprite sheets with SVG. I tried in my recent website update for the social media icons but ended up using a png. They looked fine in all my browsers until I tested it on a windows phone and the placement was all off. Granted, I still have a lot to learn about SVG's but not sure Windows mobile and IE 11 or less support is great for more than the basics.

PS I'd mentioned about the style attribute in the past, not a massive deal but would be great if you had some options in the SVG export.

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.