Exclude svg code in external files while working with GASP

[marianrick 0 Likes (Newbie)]

Dear community,

 

I got to code a one-page website. It got quite a lot of sections and SVG elements with a lot of elements. As I want to animate them, I thought I got to include them into my html document. Doing so creates a massive file with way to many lines to work productive inside the document.

 

Googling I found the `<use>` tag to reference groups or shapes, but it seems like its not suitable to reference a whole external .svg file. So thats my question:

 

- How do you handle HTML files with a lot of SVG code?

- Can I somehow use the external SVG files for internal use?

 

As a tweak, I know that SVG for Everybody https://github.com/jonathantneal/svg4everybody creates a polyfill by adding external SVG files into the DOM for IE9+. Can I somehow "always enable" this, even if I know that its not the most appropriate way?

 

To keep it simple: Its a "big thoughts low budget" project, so it does not need to a the professional solution at all and only has to support the newest browser (while IE9+ would be good).

 

Thanks in advance for any suggestions and let me know if you got any questions,

Marian. 

[PointC 8,599 Likes (Superhero)]

Hi marianrick 

 

Welcome to the GreenSock forums. 

 

Yes - SVGs can certainly add a lot of lines to your code and make working a bit cumbersome. The super simple approach would be to twirl them out of the way. I'm not sure which code editor you're using, but most that I've worked with will just let you twirl up and condense large blocks of code so they stay out of the way while you work.

 

If that doesn't work for your needs, you can inject the SVG file. Here are a couple posts by Blake that discuss that very option.

 

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

https://greensock.com/forums/topic/15686-illustrator-svg-wordpress-workflows/?p=68404

 

Hopefully that helps a bit. Others may stop by with more thoughts and advice.

 

Happy tweening and welcome aboard.

[Dipscom 2,815 Likes (Superhero)]

When you said you need to animate them, do you mean to do anything more than what you would do with a DOM element? If you're not, there's no reason not to link them in just like images.

 

Even if you are going to do more than, translate, rotate, scale to some of them. You can have the these inlined and others as images.

[marianrick 0 Likes (Newbie)]

When you said you need to animate them, do you mean to do anything more than what you would do with a DOM element? If you're not, there's no reason not to link them in just like images.

 

Even if you are going to do more than, translate, rotate, scale to some of them. You can have the these inlined and others as images.

 

 

Thanks Dipscom for the advice, there are quite a lot of good animations to perform with css only. Sadly I care about the more complex ones.

 

Thanks PointC for the hints, Ajax seems to be a good approach yet looking forward to a less complex SVG future.