svg support / illustrator integration

  • Resolved ericshew

    (@ericshew)


    9 years, 2 months ago

    Hi there,

    I really appreciate your plugin and am finding it very helpful.

    I’m wondering about how it integrates with Illustrator. Specifically, I’m interested in using Javascript and CSS to target specific elements within an SVG. I’m looking for a workflow that lets me efficiently use Illustrator with toosl like Jquery and Greensock.

    Can I use SVG support to target specific objects and layers within an SVG file? If so, could you point me to some resources that can help me achieve this? Thanks very much.

Viewing 1 replies (of 1 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    9 years, 2 months ago

    Hi @ericshew,
    Thanks for your support!

    My plugin’s advanced side is for this exactly.

    1. So you would create your file in AI and then save it as SVG.
    2. Then open it in a code/text editor (I use Sublime Text 3).
    3. You will see that an SVG is actually XML code.
    4. Simply find each element you want to target and give them each a CSS class or ID, then save the file.
    5. Upload to your media library.
    6. When embedding it on a page, you will need to add the class style-svg to the <img /> tag. Eg. <img src="//domain.com/image.svg" class="style-svg" />.
    7. Your SVG will now be rendered as an inline SVG rather than an IMG tag. You can use JS or CSS to target the elements you gave classes or IDs to earlier.

    This is the base of it. What you then do with each element is up to you.
    Feel free to drop a link to your outcome if you like, I always enjoy seeing how people use my plugin.

    Cheers

Viewing 1 replies (of 1 total)

The topic ‘svg support / illustrator integration’ is closed to new replies.