Jump to content
GreenSock

DeuxAlpha

Can't use drawSVG on SVG's created with Inkscape

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 guys! 

 

I've been using this library for a couple of days now and it's very exciting! One problem I have run into, however, is this:

 

I've recreated the Icon of our company in a SVG-File using Inkscape. Very ugly for now, but I wanted to use it as a proof-of-concept.

 

However, DrawSVG didn't work out of the box because I had to change portions of the SVG-File from something like:

 

<svg>
	<circle style="stroke-width:0.04409721;stroke:#58575a"/>
</svg>

 

to:

 

<svg>
	<circle 
		stroke-width="0.04409721"
		stroke="#58575a"/>
</svg>

 

It worked relatively well from thereon out. I thus wanted to ask, before I need to write a problem that converts these SVGs automatically, whether you know of a way to force Inkscape to adjust the way it creates styles out-of-the-box, or to tell the DrawSVGPlugin to look a little harder for the styles in the first place.

 

DisclaimerI realize this may be a question better fit over at the Inkscape Forum, but I thought I'd give it a shot here, since the connection to the GSAP library is already established.

 

Thank you in advance!

Link to comment
Share on other sites

Hi @DeuxAlpha :)

 

Welcome to the forum.

 

I'm not familiar with Inkscape so I have no idea how to control its SVG export settings, but you can always drop your SVG into a clean-up tool like SVGOMG

https://jakearchibald.github.io/svgomg/

 

I'm not sure if you're just presenting minimal code in your question, but neither code snippet would actually draw a circle as you're missing some attributes. At a minimum you'd need a radius for the circle and usually a cx/cy  if you don't want it at 0,0.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

That's a really awesome tool, and it fixed the problem, thank you very much!

 

And yes, I only included the Code that was necessary to explain the issue ;)

 

One additional little hurdle I have come across is that it seems like I can only use Inline-SVG that is embedded within the HTML-File when I'm trying to animate it.

 

What I mean is that this would animate:

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 297">
  <circle cx="104.35" cy="157.2" r="100.91" fill="#58575a" stroke="#58575a" stroke-width=".04" paint-order="stroke markers fill"/>
</svg>

 

But this would not:

 

<img src="images/drawing.svg">

 

The drawing.svg-File would have the exact same content as the Code I have pasted above.

 

The image still shows up, just, as I said, no animation.

 

This is, as far as I know, the correct way to reference the SVG-File, is it not? 

 

Thanks in advance for any help!

Link to comment
Share on other sites

That's correct. You can't animate the SVG elements with JavaScript when you add it via <img>. You need to have it inline or inject it. Similar thread here:

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

On 2/10/2018 at 1:40 PM, PointC said:

I'm not familiar with Inkscape so I have no idea how to control its SVG export settings, but you can always drop your SVG into a clean-up tool like SVGOMG

https://jakearchibald.github.io/svgomg/

 

 

I've never had a good experience using that. It changes too many things.

 

The best thing you can do to make sure your SVG works with GSAP is to get rid of transforms. In most SVG editors, it's simply a matter of ungrouping and grouping stuff.

https://stackoverflow.com/a/44021761

 

  • Like 2
Link to comment
Share on other sites

9 hours ago, OSUblake said:

 

I've never had a good experience using that. It changes too many things.

 

The best thing you can do to make sure your SVG works with GSAP is to get rid of transforms. In most SVG editors, it's simply a matter of ungrouping and grouping stuff.

https://stackoverflow.com/a/44021761

 

You might have a point. Although I like the modularity in that I can choose to only change the way styles would be displayed (as was the issue in my case).

 

Thanks for the link, nonetheless. As I am diving more into SVG's and the possibilities that come along with it, both regarding designing as well as animating, the possibilities continue to amaze me, and how something as simple as grouping certain object together changes the entire playing field regarding the scope of what can be achieved.

Link to comment
Share on other sites

 

9 hours ago, OSUblake said:

I've never had a good experience using that. It changes too many things.

 

I think there are a few other clean-up tools out there too, but I've honestly never used one for production work. I try to control most everything coming out of AI. It adds a few things that I don't like, but they can quickly be deleted. I find the more meticulous you are about preparing artwork, the easier your animations will be.

  • Like 2
Link to comment
Share on other sites

7 minutes ago, PointC said:

I think there are a few other clean-up tools out there too, but I've honestly never used one for production work. I try to control most everything coming out of AI. It adds a few things that I don't like, but they can quickly be deleted. I find the more meticulous you are about preparing artwork, the easier your animations will be.

 

That's really the best way!

 

And I wasn't trying to knock SVGOMG. It does a good job of cleaning up your SVG. But that's the problem. The default settings are too aggressive, and may change your paths, or combine them with other paths. That's fine if your SVG is static. But if you plan on animating it, it can create a lot of problems.

  • Like 2
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.
×