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

jstafford · December 26, 2015

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>

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?

GreenSock · December 27, 2015

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.

OSUblake · December 27, 2015

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>

jstafford · December 27, 2015

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

jstafford · December 27, 2015

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

OSUblake · December 27, 2015

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 });
}

OSUblake · December 27, 2015

Just saw an article on CSS-Tricks about using Grunticon, and they used their own AJAX solution instead instead of the one created by the task.

https://css-tricks.com/inline-svg-grunticon-fallback/

jstafford · December 27, 2015

Hi Blake, yes I saw this. Your experience with ajax for loading inline svg made me side with this article,https://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

OSUblake · December 27, 2015

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.

jstafford · December 27, 2015

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.

OSUblake · December 27, 2015

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

jstafford · December 29, 2015

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.

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

Warning: Please note

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members