Jump to content
GreenSock

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

non-inline SVG and control with GSAP

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

I am looking to maintain control of classes. IDs, and elements of an SVG through an imported or external SVG file with GSAP. The reason is that sometimes the SVG code gets so long, and I'd rather have it in a file outside of my main HTML file. It looks like maybe using the <object> tag can work, but I'm not sure:

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>
Link to comment
Share on other sites

yes. Thanks! I'll give it a try.

Link to comment
Share on other sites

Hi celli  :)

 

pls try like this :

var svgObject = document.getElementById("svgObject") ,
svgDoc = svgObject.contentDocument ,

// select child elements like this :

svgChild = svgDoc.getElementById("svgChild"),
svgChild2 = svgDoc.querySelectorAll(".myClass");
  • Like 2
Link to comment
Share on other sites

Some of the code gurus around here may also have some more info about a way to make GSAP work with embedded SVGs.

 

For my 2 cents worth here - I'd leave the SVG inline to give you the greatest amount of control with the least amount of hassle. GSAP can then easily work with any of your IDs, groups and classes without any difficulty. Yes - sometimes the SVG code can get a bit long, but that's really more of a human problem (ugh - look at all that code!)  than a problem for the browser. Most text editors have a little twirl icon to hide blocks of code while you're working anyway so you don't have to scroll through it all the time. Of course, this is all just my opinion - YMMV.  :-)

 

Edit: yep Diaco already has code info for you. 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

I finally got back around to trying to control the non-inline SVG with GSAP, and I didn't have any luck. Here is a codePen showing it. I tried an object tag and an img tag but both ways doesn't seem to let me access the svg element or child elements. 

See the Pen KdzXdx by celli (@celli) on CodePen

Link to comment
Share on other sites

Yeah, unfortunately when using <object> you must load the svg from the same domain and this impossible to do on CodePen :(

 

I made a very simple demo here using Diaco's code: http://greensock.com/forums-support-files/svgObject/

 

Source:

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body>
<object type="image/svg+xml" data="greensock-logo.svg" class="logo" id="svgObject"></object>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>


function go(){
var svgObject = document.getElementById("svgObject"),
svgDoc = svgObject.contentDocument,


// select child elements like this :


svgChild = svgDoc.getElementById("rectangle")


TweenMax.to(svgChild, 1, {rotation:360, transformOrigin:"50% 50%", repeat:400});
}
//wait until object is loaded (lazy)
TweenLite.delayedCall(1, go);


</script>
</body>
</html>

Also I saw some other errors in your pen like:

 

You were passing the # into getElementById()

var svgObject = document.getElementById("#txt-design-script") //bad
var svgObject = document.getElementById("txt-design-script") // good

You didn't have an id on your <object>

  • Like 3
Link to comment
Share on other sites

I would second PointC's great advice! You could have it external but some browsers have issues including external SVG files, and then applying SVG filters, masks, and other SVG goodies. And by external I mean importing via a reference to an external SVG, like through an image tag or CSS background-image which has browser bugs. But if you meant just include external SVG as a snippet in the page,that is easy and can be done in various ways like PHP includes, or template fragments via ajax.

 

Object tags can have cross-domain security issues.. Carl beat me to the punch.. again ;)

 

Have the SVG in your HTML file like PointC advised is the way to go.

 

Here is W3C spec article on SVG and HTML, showing how they work together and what happens behind the scenes when your HTML page renders with SVG in it. Also when the browser will trigger the XML parser for use in your HTML document.

 

W3C SVG HTML Proposal: http://dev.w3.org/SVG/proposals/svg-html/svg-html-proposal.html

 

 

 

I hope this helps! :)

  • Like 3
Link to comment
Share on other sites

That makes perfect sense. Thanks guys.

Link to comment
Share on other sites

I've shown how to use external SVG numerous times using ajax. There's nothing magical about it. It just an http request, like everything else loaded on your page.

 

With jQuery

http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview

 

And without

http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview

 

The other day @MindGamer brought a great idea about using SVG as JavaScript string variables. That way you don't even have to make an ajax call. Using string variables for content is very common approach in libraries like Angular. It's fast and the JavaScript file will be cached.

 

Check this out. Where's the SVG coming from?

See the Pen f9ad0aafc2fa585e60e4b9642ac716b3 by osublake (@osublake) on CodePen

 

Right here...

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js

 

 

 

 

 

 

  • Like 6
Link to comment
Share on other sites

wow, OSUblake. You are a master. I love this!

  • Like 1
Link to comment
Share on other sites

  • 4 years later...

Hi did someone ever solved this for GSAP3 in Vue.js ?
Here is a demo solution that works:

 

<template>
<div>
<object id="svgObject" type="image/svg+xml" :data="svg"></object>
</div>
</template>
 
<script>
import gsap from 'gsap'
 
export default {
data() {
return {
svg: require('@/assets/simple_opt.svg'),
}
},
mounted() {
// if (this.blink) {
// this.doBlink()
// }
window.addEventListener('load', function() {
// here is the Vue code
 
var svgObject = document.getElementById('svgObject'),
svgDoc = svgObject.contentDocument,
// select child elements like this :
 
svgChild = svgDoc.getElementById('path')
 
/*
/ ANIMATION
*/
 
// MOVEMENT
gsap.to(svgChild, {
duration: 3,
opacity: 0,
xPercent: -30,
yPercent: 8,
ease: 'power2.InOut',
repeat: 0,
})
 
/* END ANIMATION */
})
},
methods: {},
}
</script>

 

 

 

Cheers

Anton

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 9/18/2015 at 1:48 PM, OSUblake said:

I've shown how to use external SVG numerous times using ajax. There's nothing magical about it. It just an http request, like everything else loaded on your page.

 

With jQuery

http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview

 

And without

http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview

 

 

I don't understand how this is working? It appears to be loading the external SVGs through the script.js?

 

It would be SO EXTREMELY HELPFUL to NOT have to copy and paste the SVG inline into the HTML code - I could then edit the SVG separately in a dedicated SVG editor - it's a rather complicated SVG and it would be much simpler to directly edit the file within Illustrator, export, and see those changes reflected without the hassle of copy and pasting? Further, I usually end up editing Illustrator's SVG in Boxy SVG. 

 

And my apologies if I'm not supposed to resurrect older posts. Searching for how to do this, everything seemed outdated? This post references Chris Coyer:

 

https://css-tricks.com/using-svg/

 

And then your post seems to be the proper solution - but I don't have the knowledge of javascript to understand how to implement it?

 

And, for all I know - this isn't even an issue now? But my possibly ignorant attempts to embed as an object within the HTML have failed - so possibly this remains the solution - but I can't "read" it? Normally the gurus have //comments explaining what the heck is going on for us morons? ;)

Link to comment
Share on other sites

@Creek Unfortunately we just don't have the resources to provide free consulting for general web/JS/SVG stuff. We really try to keep these forums focused on GSAP-specific questions. Please read the forum guidelines. You've been super polite and you've expressed gratitude for all the help people have given you thus far which is fantastic. I know you're new to JS and struggling with a lot of things. Perhaps it'd be worthwhile to post in the "Jobs & Freelance" forum to see if you could hire someone to help? Just a thought. 

 

Good luck with your project 👍

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

9 hours ago, Creek said:

And, for all I know - this isn't even an issue now? But my possibly ignorant attempts to embed as an object within the HTML have failed - so possibly this remains the solution - but I can't "read" it? Normally the gurus have //comments explaining what the heck is going on for us morons?

 

I wouldn't recommend using an object to embed your SVG. It just makes things too complicated if you're trying to animate it. And I'm not sure what comments to add to that first example I posted as everything is based on another library, jQuery, so it's best to read their documentation on how the .load method works.

https://api.jquery.com/load/

 

The other example is basically what jQuery is doing under the hood, and way beyond the scope of this forum as Httprequest can be rather complicated.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

 

9 hours ago, Creek said:

It would be SO EXTREMELY HELPFUL to NOT have to copy and paste the SVG inline into the HTML code - I could then edit the SVG separately in a dedicated SVG editor

 

And sometimes it's just easier to copy and paste your SVG in because you may have to manually edit it, and then it's usually best to run your SVG through an optimizer like SVGOMG.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

On 8/29/2015 at 1:01 AM, celli said:

<object>

Hi! 

Don't forget to check if object load, only after - you can get contentDocument 

You dont need wait till document load, only object.

  • Thanks 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

And sometimes it's just easier to copy and paste your SVG in because you may have to manually edit it, and then it's usually best to run your SVG through an optimizer like SVGOMG.

100%

 

Copy pasting SVG code into your HTML is the easiest route by far.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

On 8/28/2015 at 11:01 PM, celli said:

sometimes the SVG code gets so long, and I'd rather have it in a file outside of my main HTML file

 

If ease of reading / tidyness is the main reason for wanting to keep the SVG code out of your HTML - using a templating language that allows includes or a framework that allows for components is probably the best route imo.

 

This is pretty standard for web development nowadays, pretty much every templating language or framework will solve this problem.

 

e.g. nunjucks

 

https://mozilla.github.io/nunjucks/templating.html
 

<h1>a heading</h1>

{% include "example.svg" %}

<p>Some text</p>

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks - again, I appreciate everyone's patience - I'll do my best to make certain I stick to GSAP issues in the future.

 

And it honestly didn't hit me that php include very literally includes - so probably my best option?

 

But - just tossing it out there - my hope at least is that inline SVG will go the way of inline everything else? Where it can be done if it's a tiny SVG - but I'm not forced to do it?  I just thought I'd missed the new command - seems very odd? For me, at least, SVG has both the visual bit, that I can edit with a visual editor - and then whatever the visual editor changes, which is then reflected in the SVG file in VSCode when I save in the visual editor. But, with the SVG buried in the HTML, that's not even an option. So I'm just constantly copying and pasting between the opened SVG and the HTML - which hopefully I'll no longer be doing by using PHP include ;) I don't mind having it inline for the final, where I can avoid PHP altogether - but, for editing, it's most definitely a PITA.

Link to comment
Share on other sites

I most definitely found it INSANELY helpful to use a PHP include. In my workflow, I'm editing in Illustrator, primarily dealing with morphing issues, but it's a constant back and forth - then exporting to SVG, and (thankfully) no more copying and pasting to and from the html file. It was a tremendous PITA ;)

 

Oh, and because PHP also didn't wish to play well - SVGs are just the batman level BANE of gotham coding city. Stupid rickem rackem SVG ruckem fruckem... Fred Flintscode even hates them. Anyhow - here's the code that finally worked for me:

 

<?php echo file_get_contents("stupidhorriblepesky.svg"); ?>

 

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