Jump to content
Search Community

Exclude svg code in external files while working with GASP

marianrick test
Moderator Tag

Go to solution Solved by PointC,

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

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. 

Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

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...