Jump to content
Search Community

New Adobe Illustrator export options for SVG

PointC test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone,

 

For anyone, like myself, exporting a lot of SVGs out of Illustrator for your GSAP animations, take a look at the new features:

 

https://helpx.adobe.com/illustrator/how-to/export-svg.html

 

Unique IDs, individual pieces can be exported and ways to minify the bloated code of the old 'Save as' SVG. Looks like some nice improvements.   :)

  • Like 4
Link to comment
Share on other sites

Thanks for posting this PointC. 

 

It seems like there are some helpful features, however I was hoping for a better workflow. I am constantly editing SVG elements and need to bring the <svg> code into an html editor and I would much prefer a single "show me the SVG code" button or panel instead of going through file > export each time. 

 

The illustrator team has reached out to us for feedback, just haven't been able to describe this properly to them.

  • Like 3
Link to comment
Share on other sites

Hey Carl,

 

Now, I didn't say it was great - just a bit better - I mean, this is Adobe after all.  :lol:

 

I'm in complete agreement with you on some type of 'Show SVG code' button - that would be pretty nice.

 

I'm glad they reached out to you for feedback though. Maybe you can continue to explain things to them until they get it right. 

 

 I certainly hope they continue improving on this and I think they will as SVGs are gaining quite a bit of traction, but time will tell.

  • Like 1
Link to comment
Share on other sites

I don't know if anyone is interested..  but i have found this Illustrator extension tool called DrawScript. It is helpful for seeing how the paths you draw relate to code. It is great for generating graphics code from vector shapes in real time. You can even create bezier array code right in illustrator. Even though it might be geared towards more canvas / Flash CreateJS based, but could be useful, especially the bezier array functionality for SVG:

 

http://drawscri.pt/

 

But I would love a show SVG code in Illustrator, hopefully we see that added soon!

  • Like 1
Link to comment
Share on other sites

In my workflow I use PhotoShop CC layers to export everything using Generate > Image Assets. I set all my text layers to .svg, photos to .png or .jpg, Works brilliantly as you can adjust things in photoshop, refresh your browser and the changes are applied with no exporting. Unfortunately with .svg there are no parameters that you can set in PS. For bitmaps you can add .png24 to the end or .jpg70%. I have to outline the text layer too so that the svg is font independent. The weight of the text changes with outlining, more noticeably on smaller size text which was a major pain point. Illustrator gives far better control but it is adding a second app to my work flow which I am not jazzed about. 

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...