Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jstafford

Does anyone here use Grunticon to embed inline svgs before using GSAP?

Recommended Posts

I prefer not to paste inline svgs into my code. I have been using external references to pull in my svg and let greensock animate with the object tags like so:

 

<object type="image/svg+xml" id="example-id" data="path-to-svg/example.svg>
</object>
 
I was then fetching the specific elements within the svg to animate but this has become very cumbersome.
 
function getNavSvgEl(elId, className) {
var svgDoc = document.getElementById(elId).getSVGDocument();
return svgDoc.getElementsByClassName(className);
}
 
I have been playing around with grunticon as a way to embed svgs inline to get the advantges of having inline SVG in my DOM without having to do the awkward fetch function above. With initial tests, Greensock seems to be able to animate these embedded svgs as if they are inline. Has anyone had experience with this that could offer any advice before I get to far along and realize too late? Has anyone had problems with Grunticon in a GSAP animate workflow? 
Link to comment
Share on other sites

I have zero experience with Grunticon. Sorry. Nor have I heard from anyone who had any problems (or success) with it. I wish I had more to share. Maybe someone else can chime in here. 

Link to comment
Share on other sites

I've never used it, so I can't speak from experience, but this seems geared towards icons with png fallbacks. Is that what you are trying to do, or are you just trying to inline SVGs? GruntIcon is not inlining the SVGs as a build task. It adds a script to your file which uses AJAX to inline them at runtime. Not sure I see the value in using GruntIcon for this reason as AJAX is very easy to do, especially with jQuery
 
With jQuery: http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview
Without: http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview
 
If you want to include SVGs as a build task (so they are not added at runtime), you might be better off using something like gulp-inject.
 

<html>
<body>
  <!-- foo:svg -->
  <!-- your svg will go here... -->
  <!-- endinject -->
</body>
</html> 

Link to comment
Share on other sites

Thanks Jack and Blake. Kind of a newbie with using SVG.

Link to comment
Share on other sites

Don't use ajax a lot, but loading the svg at runtime is what I need.

Link to comment
Share on other sites

Pretty much every SVG injector out there uses AJAX, so you'll be able to find a lot of resources out there if you run into trouble. Just make sure your SVG is loaded before you try to animate it.

 

As I said before, super easy with jQuery.

$("#some-container").load("mysvg.svg", startAnimation);

function startAnimation() {
  TweenMax.to("#foo", 1, { x: 100 });
}
Link to comment
Share on other sites

Well you can't go wrong with anything that Todd Motto does. He's a freaking genius! I use snippets of his code all the time.

Link to comment
Share on other sites

Not sure if this is ajax. JQuery solution. Thank you for taking the time to reply to my question. I was dependent on the object tag and it was causing headaches for me because it was an external resource not in the DOM.

Link to comment
Share on other sites

Loading stuff is going to be much easier in the future thanks to the Fetch API. I just tested it out in Chrome. Only 3 lines of code. Easy breezy!

fetch("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg")
  .then(response => response.text())
  .then(svg => document.body.insertAdjacentHTML("afterbegin", svg));

See the Pen 06680b4e98d0a085423baea65e40b191?editors=001 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Hi Blake, just wanted you to know that Todd Motto's way (img src) is still referencing the svg as an external document and it is not part of the DOM. His modernizr jquery script is nice and I may use it for png stuff and ie8, but your jquery ajax load way allowed me to gain access to the id and classes within the SVG itself without having to do the additional awkward fetches (getSvgDocument, then getId or getClass, etc.) after including the svg in an object data or img src tag . You are the genius sir. Thanks again.

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