Jump to content
Search Community

MorphSVG - raw path data vs href

Tanuki test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Just started using GSAP - working my way thru the MorphSVG plugin.

 

All the examples using raw path data, either as a direct parameter or by reference to an element.

 

Is it possible to reference an svg file via <img src = ... ?

 

- does that imply using the convertTopath method?

 

- and will the convertTopath method work on complex shapes? The docum speems to suggest that it's intended for basic shapes (e.g. rect, polygon, etc).

 

I'm trying to get to dynamic references to svg files based on user input...

 

Thanks!

Link to comment
Share on other sites

No,  you can't use images. The plugin works by reading the path data from a <path> element, or you can provide the path data yourself in the form of a string. It can't read the contents of an image.

 

7 hours ago, IMTanuki said:

and will the convertTopath method work on complex shapes? The docum speems to suggest that it's intended for basic shapes (e.g. rect, polygon, etc).

 

There's are no complex shapes, just shapes. Perhaps you are asking if will morph between groups of shapes, like morphing between images, and the answer is no. It only works with path data.

 

7 hours ago, IMTanuki said:

I'm trying to get to dynamic references to svg files based on user input...

 

Once you load in a svg, you can parse it to get the path data you need.

 

  • Like 5
Link to comment
Share on other sites

Not sure I understand all your comments - I get that MorphSVG needs path data.

 

So maybe I should rephrase my question - will the convertToPath method work on SVG's that are referenced by an <img src=...> element? Or do I need to first paste in the actual SVG content into my html?

 

I've been trying to reference the src file like this, but it's not working - so my question is - is this even feasible?

HTML:
<img id = svg-target-hanzi class="modal-common-light…"	
src="../assets/img/hanzi/img-hanzi-0300X0300/img-hanzi-wo-0300x0300-trans-dark-fill.svg"

JS:
let target = document.getElementById("svg-target-hanzi");
let srcRect = document.getElementById("svg-src-rect");
MorphSVGPlugin.convertToPath(target);

 

Thx

Link to comment
Share on other sites

Cassie, thx for the super quick reply.

Yes, I previously watched Carl's video and I guess I keyed off his comment that you could use SVG's created in Illustrator (which is what I am doing).

 

Here's my endgame:

- dynamically populate a page element with SVG's (in this case, Chinese characters).

- morph them to some kind of shape with English text.

 

If I understand you correctly, what I would need to do would be:

- create the SVG's in Illustrator.

- convert each SVG to path data.

- populate the page element(s) with path data.

- skip the convertToPath

- use the SVGMorph against path data.

 

So, I already have that working in my prototype. The reason I've been trying to use convertToPath is that I haven't found a way to export path data directly from Ai and have had to manually convert each SVG. Also, it seems that images rendered from path are not as crisp as the original SVG's, but I think that's unavoidable.

 

If you know of a good conversion site, that would be greatly appreciated.

 

Thx again!

Link to comment
Share on other sites

1 hour ago, Tanuki said:

Not sure I understand all your comments

 

Not sure which you ones you are referring to. The point was that you can't use images and that you can't morph between a group of shapes*.

 

For the parsing part, I was referring to dynamically loading SVGs.

See the Pen 27ecfcb76a799484b07a1d6ef75ba6b3 by osublake (@osublake) on CodePen

 

 

36 minutes ago, Tanuki said:

- dynamically populate a page element with SVG's (in this case, Chinese characters).

- morph them to some kind of shape with English text.

 

If you're morphing between a group of shapes, like a Chinese character to a shape, you will probably need to merge all the paths into a single compound path.

 

38 minutes ago, Tanuki said:

The reason I've been trying to use convertToPath is that I haven't found a way to export path data directly from Ai and have had to manually convert each SVG.

 

Instructions on how to export SVGs.

 

  • Like 4
Link to comment
Share on other sites

I think we may have a nomenclature issue. I'm brand new to gsap, so bear with me.

- I don't think I mentioned "images" - so I fully understand that SVG's are the only types that can be used in the SVG Morph plugin.

 

- Similarly, groups are probably not applicable here - multiple characters would be created as a single SVG.

 

- I did mention "shapes", such as <rect> elements - not sure what to call those in the gsap world, but I've already confirmed that <rect> etc can be converted using convertToPath, so that's not an issue either.

 

- Chinese characters, which are created in Ai as simple text with Chinese fonts, generate very complex exports - nothing nearly as straightforward as the example in the "better Ai exports" article. Regardless of the export method (and the one in the article is nearly identical to what I've been using) Ai exports of Chinese text generate files that are 280+kb. The path info is at the very end, so I've been manually copying the path data into my html. 

 

- I do see a parsing function in your codepen and that's probably the approach I should use. Not sure if it will choke on the huge SVG's I'm getting out of Ai, but I'll give it a shot.

 

Thx for all your help.

Link to comment
Share on other sites

25 minutes ago, Tanuki said:

I think we may have a nomenclature issue. I'm brand new to gsap, so bear with me.

 

It's fine. We're just trying to get you heading in the right direction.

 

26 minutes ago, Tanuki said:

I don't think I mentioned "images"

 

You kept asking about using an SVG with a image.

 

23 hours ago, Tanuki said:

Is it possible to reference an svg file via <img src = ... ?

 

All we were saying is that is not possible do to way images work.

 

Link to comment
Share on other sites

So if I swap out img with svg, then the statement is true? As in your codepen:

<svg id="svg4" class="svg c-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">

  <use id="logo" class="c-logo__roadmap" href="#roadmap-small-logo"></use></svg>

 

I can pop an svg file in this element and, using your parser, I can use SVGMorph?

 

The question I've trying to address is can I avoid having to use hard-coded path info in my html...

 

 

 

Link to comment
Share on other sites

2 hours ago, Tanuki said:

The question I've trying to address is can I avoid having to use hard-coded path info in my html...


Why do you want to avoid inline SVG? (It might help us find you a solution.) 

Technically there's plenty of ways to avoid hardcoding SVG paths in your HTML - you could keep all the path data in a JSON file or something, read it in and inject it dynamically. But I don't know how many SVG paths you're talking about or what problem that would solve?
 

  • Like 2
Link to comment
Share on other sites

You mentioned in your PM to me that you were getting large files with base64 png data when you export. Do you happen to be exporting with a gradient along the stroke or something like that? I ask because I'm not sure why AI is trying to export as an image, but a gradient along a path would certainly make that happen. Take this little swoop with a gradient example:

 

See the Pen d7fdbb57ccbe78689bd67d6d50c7cd1c by PointC (@PointC) on CodePen

 

It's not very sharp and has a large amount of data to render the png. The problem is that it doesn't look good at all now and far worse if you tried to enlarge it. That would also explain your comment above about things not looking sharp.

 

Here's a couple Chinese characters with a solid fill.

 

See the Pen 76a1cad9b5fee8e0ccf2aeea10a9b66b by PointC (@PointC) on CodePen

 

There's a fair amount of path data, but nothing too crazy. 

 

Anyway, just trying to figure out why AI wants to export an image of your files and the gradient along the path thing came to mind.

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

I think the problem  is that CJK (Chinese, Japanese and Korean) are all 2 bytes per char. Also, I'm using the Kaiti font. But either way, I think the parser function that Blake provided may be a way to strip out the path - TBH, it doesn't matter to me if Ai exports the Encyclopedia Britannica with each character, as long as I can parse the path...:>) working on it today... 

Link to comment
Share on other sites

Cassie - I have 3 use cases.

The first is a more "traditional" animation in a page header, where there's really only  a few characters and it doesn't matter if they're inline or not.

The second is a dynamic animation of any Chinese character (there are 8,105 at last count) based on the context (either user input, highlighted text or whatever). Although most people assume that each character is just a composite of random strokes, in fact, each character is composed of one or more simpler characters (and that's recursive, so those smaller simpler characters are, in turn, further decomposed). So the goal is to store both a character and its components and animate the composition.

The third is animating the stroke order of any selected character,  which is considered important in understanding each character.

 

Character decomposition and stroke order would be mutually exclusive animations. And although the persistent store needs to be a relational db, I think JSON would be a workable (if not mandatory) intermediate format.

 

Hope that clarifies the reason(s) for avoiding inline paths!

 

Thx!

  • Like 1
Link to comment
Share on other sites

Ok - gotcha - so you can still use inline SVG!

Have an SVG inline with no paths
Listen to some sort of event - fetch the path data,
Pop that path data into the SVG,
Do whatever morphing you need to do. 

No need to use image tags. 😉

  • Like 3
Link to comment
Share on other sites

Carrie,

 

Many thanks! Just to make sure I understand the constraints for using SVGMorph, could you kindly confirm the following:

-  for complex shapes (i.e. other than rect, circle, etc.), SVGMorph requires path data.

- SVGMorph can only reference path data implemented as inline html code.

- SVGMorph cannot directly reference path data in a file, regardless of the tag (i.e. img, svg, etc.).

- if I have to dynamically display SVG's (based on user selection or other criteria), then I have to somehow  populate the <path> tag with each SVG path data using some kind of parsing function.

 

Thx again!

 

 

 

Link to comment
Share on other sites

  • Solution

*Cassie

Yes - the  <path> element is what is used to define detailed shapes, and the string inside the d attribute is what morphSVG needs.

11 hours ago, Tanuki said:

-  for complex shapes (i.e. other than rect, circle, etc.), SVGMorph requires path data.


 

No -  Inline SVG, this just means SVG that is in the DOM so that the path data can be accessed by Javascript.

You don't need the destination path to be in the DOM either, that can be stored as a variable.

11 hours ago, Tanuki said:

SVGMorph can only reference path data implemented as inline html code.


 

morphSVG can't access paths inside an img tag, as far as JavaScript is concerned that's just an image. Not sure what you mean by regardless of the tag img, svg etc? If it's referencing an image it won't work, the path data has to be accessible.

11 hours ago, Tanuki said:

SVGMorph cannot directly reference path data in a file, regardless of the tag (i.e. img, svg, etc.).

 

Yep! But parsing function makes it sound really complicated.

11 hours ago, Tanuki said:

if I have to dynamically display SVG's (based on user selection or other criteria), then I have to somehow  populate the <path> tag with each SVG path data using some kind of parsing function.

 

Set attribute will do pretty much all the heavy lifting.

// pop an svg into the DOM
<svg>
 <path id="myPath" d="M 0 0 L 0 50 L 50 50"/>
</svg>

// get the path with JS
let path = document.getElementById("myPath");

// use set attribute to change the path data
path.setAttribute("d", "M 0 0 L 0 50 L 50 50");


does this help?

  • Like 5
Link to comment
Share on other sites

@Cassie @PointC

 

fyi re "parsing" path data...

 

npm plugin - this is kind of what I was looking for to "extract/parse" path data from an svg file - it works, but you'd need to write an app to create persistent "path data  only" files:

 

https://www.npmjs.com/package/extract-svg-path

 

var parse = require('parse-svg-path')
var extract = require('extract-svg-path')
 
var path = extract(__dirname + '/infinity.svg')
var svg = parse(path)
console.log(svg)
//=> [ [ 'M', 25, 15 ], ... ]

 

gimp - here's an alternative to do the same thing to create persistent path data files using gimp. Gimp is a little painful to use, but for this kind of function, it works...

 

https://www.useragentman.com/blog/2013/04/26/how-to-create-svg-paths-easily-using-the-gimp/

 

Not sure why Adobe can't provide this functionality OOTB...

Link to comment
Share on other sites

I'm really unsure about your export settings. I export paths all the time from illustrator. It seems like that gimp article is just creating a path, nothing special at all... Illustrator can do everything gimp can do and a million more things.

I don't know what you mean by 'persistent path data files'

Link to comment
Share on other sites

But that's the whole point - I only want the path data!

 

If I use "images - link" in my export settings, I can eliminate the png content from my svg file, but I still don't get just a path data string. 

 

But just to put this issue to bed, can you tell me what your Ai export settings are and...do you get a simple path data string?

 

"persistent" in this context means the path data (and only the path data) is stored in a db and doesn't need further modification in order to use xxx.setAttribute('d', ...).

 

 

 

Link to comment
Share on other sites

Are you using "Export → Export As" or "File → Save As"?

 

The Image Location setting in the export/save panel is if you have a raster image as part of the project. That's the point I was making above. There has to be a reason for AI wanting to export an image and/or trying to link a .png. 

 

Just FYI - using "Export As" will produce different results than "Save As". If, for example you choose Image Location of link and you export, you won't get the path data. If you do the same thing with "Save As" you will get the path data. Just remember to place the .png/.jpg in the dame directory as your SVG if you choose to link.

 

Cheers. 

:)

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