Jump to content
Search Community

Illustrator SVG Wordpress workflows

ericshew 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

Hi there,

 

I've spent an hour or two looking at the documentation and the forum and I'm excited by what I'm seeing. 

 

I'm a designer who would like to develop an efficient workflow for working with Wordpress and Illustrator. in time, I would like to use to use CC Animate. 

 

In my ideal world, my workflow would be something like:

  • Develop my SVGs in Illustrator in separate artboards, using a combination of symbols and non symbols
  • Export them using the new export screens feature
  • Import the SVGs onto a server via FTP (not using Wordpress media import feature) 
  • Be able to manipulate SVGs using Jquery, GSAP, and CSS

I'm pretty good about learning technical processes, but I'm more of a designer than a developer. 

 

The SVG gotchas post was helpful but I'm hoping for a less high maintenance revision process. 

 

I understand that this workflow is probably not realisitic at this point, but I'm hoping people can give me some ideas on resources I can use to develop something that works.

 

Thanks in advance for your help,

 

 

Link to comment
Share on other sites

Hi ericshew,

 

I am not quite sure if you are just making a comment, asking for help or an announcement. Soz. :P

 

If you embarking on a learning voyage and just commenting on it, good luck sir. We hope it goes well and we shall be ready to help where we can.

 

If it's a question/issue, I'm afraid you'll have to elaborate a bit more.

 

Any other enquiry, please press 6 in your dial pad.

  • Like 5
Link to comment
Share on other sites

Hey again ericshew  :)

 

I think we're all looking for that magic bullet workflow made of shiny stainless steel and a few clicks. My own reality is a workflow made of cardboard and held together with duct tape and twine.  :D

 

I think you're just asking for some general guidance and maybe some links for a more efficient workflow?

 

Since you're using WordPress, this thread comes to mind and may be helpful.

http://greensock.com/forums/topic/14037-problems-integrating-animated-svg-in-wordpress/

 

Blake has some info about injecting SVGs here:

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

 

Adobe has certainly improved the SVG export from Illustrator, but they have a long way to go IMHO. With their monopoly I'm not too hopeful for rapid improvements.

 

You may like another designer's process, but I think in reality we all have to develop a workflow that is best for us. It's really going to depend on what you're creating and what you're comfortable with. You'll undoubtedly discover certain methods and processes are faster and easier for you. Speed and efficiency will come with time. 

 

The only rock solid part of my workflow is GSAP. The rest is the wild west of SVGs, Adobe, browser bugs and 10 gazillion devices in consumers hands.

 

Probably not the exact answer you wanted, but others may jump in with additional links and advice.

 

Happy tweeening.

:)

  • Like 5
Link to comment
Share on other sites

Great! Thanks. I should have been more specific about my requests...  My hope is that something approximating this process is within reach and that people could give me a nudge towards either a workable process or dash my hopes forthwith. :)  I feel like I've lost years of my life trying to learn and adapt to new technology, sometimes successfully. 

 

I'll delve into the resources you posted and then steel myself for another wild west scenario. If it was easy, everyone would be doing it... 

 

Thanks again! 

  • Like 2
Link to comment
Share on other sites

A seamless workflow from Illustrator to WordPress isn't that hard, but you're going to need learn a few things first, like how to make a build system.

 

I think Gulp is a good system to start out with if you're new to development. There are a bunch of plugins to optimize and inject SVGs, and setting up a live reload server is a breeze using browser-sync.

  • Like 1
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...