Jump to content
Search Community

Best practice: InkScape SVG's and Injecting SVG to DOM

Lars Ejaas 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 everybody

 

I am all new to GreenSock animations - so please bare with me if the questions already have been answered. I have actually used quite a bit of time trying to find the answers myself :-)
 

I primarily work with Joomla CMS, and InkScape for SVG's. I have made a few small animations with CSS, but would really like to take the webanimations further - so this is why I have started looking into GreenSock :-) 

In Joomla I keep hitting content-limits on making inline SVG's so I need some way to inject SVG's to the DOM and still be able to access paths, groups and so on for animations.

 

I know some javaScript, but my knowledge is somewhat limited - and JQuery doesn't really make much sense to me. 

 

1. Can anyone help with best practice for injecting SVG's to the DOM? Am I doing this right?

I have made a pen where I have included one of my SVG's in <object>tags and some JS to access the script (I made the JS without JQuery dependency because I still have limited knowledge to get this working).

 

It works on my own homepage in all major browsers, but I am new to CodePen and can't really get it working over here?
(I tried visualizing in the HTML how I included the .js files on my homepage).

 

2. Anyone with experience with exporting SVG's from inkscape for web?

I have tried Save As > Optimized SVG - but the layers tend to "jump around" a bit and making the SVG useless. Not sure what I am doing wrong? Inkscape's native SVG's work allright, but it would be nice to be able to limit the size on them somewhat...

 

Sorry for the long post - I hope some of you might be able to help a bit - thanks :-) 

 

See the Pen qBWvqgy by lars-ejaas (@lars-ejaas) on CodePen

Link to comment
Share on other sites

Hi again

Sorry for all the questions: Still trying to get my "head wrapped around" doing this the best way...

Is there any reason why most people use inline SVG? 

I have played a bit around with including the JS code directly in the SVG. This way everything is included in the image - and one can simply insert the image/banner on the page as needed. 

I have tried it in Firefox, Google Chrome, Safari and Internet Explorer so far - seems to work fine...

Link to comment
Share on other sites

Hi @Lars Ejaas

 

From your CodePen example you wont be able to access the internal paths of your SVG to animate them, as it's just being rendered by the browser as an embedded image. This is why people Inline their SVGs. I'm not familiar with Joomla, but when working on some WordPress projects I've use PHP files with the SVG code in them and injected them with that.

 

Looking at your example, your best bet may be layering multiple images/svg as and animating these images over top of each other, that way you can take advantage of browsers' hardware acceleration.


Also, for optimizing, using SVG OMG may help reduce your file size: https://jakearchibald.github.io/svgomg/

  • Like 5
Link to comment
Share on other sites

31 minutes ago, elegantseagulls said:

Hi @Lars Ejaas

 

From your CodePen example you wont be able to access the internal paths of your SVG to animate them, as it's just being rendered by the browser as an embedded image. This is why people Inline their SVGs. I'm not familiar with Joomla, but when working on some WordPress projects I've use PHP files with the SVG code in them and injected them with that.

 

Looking at your example, your best bet may be layering multiple images/svg as and animating these images over top of each other, that way you can take advantage of browsers' hardware acceleration.


Also, for optimizing, using SVG OMG may help reduce your file size: https://jakearchibald.github.io/svgomg/

Thanks a lot elegantseagulls 
SVG OMG  really looks like the "missing tool" - thanks!
I am still thinking that it might actually be the easiest path to simply include the JavaScript code directly inside the SVG - as long as I place the SVG inside <Object> tags it seems to work really well. This way it will also be a lot easier to make small changes to the SVG afterwards :-)

 

Link to comment
Share on other sites

1 hour ago, Lars Ejaas said:

I am still thinking that it might actually be the easiest path to simply include the JavaScript code directly inside the SVG - as long as I place the SVG inside <Object> tags it seems to work really well. This way it will also be a lot easier to make small changes to the SVG afterwards :-)

 

I would not recommend that. Just inline your SVG. It's going to be much easier to modify and animate. And if you need help, we can't help you with your animation code because it's hosted somewhere else.

 

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