API Docs: Paper vs. Element vs. Set vs. Snap vs. Fragment

[lugehorsam]

I'm a newcomer to snap and the API looks great but it should really document what these high level objects are. Ideally these definitions would exist in the docs when you click on the root objects (it does this for mina, but not the others.)

[ibrierley]

I do think some docs could be improved, but in the meantime, here is a quick description...

Paper = Snap wrapper around the main SVG element. We sometimes call this a canvas as well, but not to be confused with HTML5 Canvas object. Element = Snap wrapper around an SVG element (although the terminology could mean the native element, so depends on context). Set = Array like group of Snap elements (we can perform operations that will apply to every element in the array). Fragment = minimal DOM object, that isn't fully in the DOM. Snap is the main Snap method to initialise things like the paper or elements (ie put a Snap wrapper around the DOM element, or create one).

[lugehorsam]

Thanks Ian!

[loganwedwards]

Yes, thank you @ibrierley. I'm using Snap for a new project and was a little confounded on the proper usage with Paper specifically since it's mostly referred to differently on external tutorial sites. This small description would go far existing on the main docs area.

[Llbe]

Element = Snap wrapper around an SVG element (although the terminology could mean the native element, so depends on context).

I find it useful to call the Snap wrapper or other similar wrappers for element and the native element for node. All through.

The native element is accessible through el.node in Snap.

[Rhywden]

The documentation on this is very incomplete. Particularly on how on Earth to convert, say, a "Fragment" to an "Element".

I mean, we have the function "Snap.load()" which loads an external SVG file (fine so far) and returns a "Fragment", according to the docs.

But NOWHERE does it explain what a fragment actually is. And, great, I can append the fragment to an existing SVG element. But what if I wanted to adjust the size of the Fragment before appending it? (Because for some reason it seems to default to "fill 100%").

The fragment does not have the "attr()" method. So, how do I get from a fragment to something I can actually USE?

[ibrierley]

Yes, I think it could be better for areas like this, and it's application. I think in your case, you would have to use select/selectAll on it, and do something eg... add a circle as a fragment, change the colour and then append.

http://jsfiddle.net/jw7zntfm/4/

`var frag = Snap.parse('');

var fc = frag.select('circle').attr({ fill: 'red' })

s.append( frag )`

[Rhywden]

Sorry, but "you have to do something" doesn't quite cut it. I also don't want to have to add some SVG elements just to get my existing SVG file to render in the way I want it. Also, "SelectAll" needs some kind of selector. When I'm loading in arbitrary files (they're autogenerated by another process), I can't be reasonably sure that "SelectAll" will actually encompass all the elements in the file.

Plus, scrolling through the docs (because everything is in ONE massive document) is a massive pain. This here: https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.contentdialog.aspx is a much more reasonable way of organizing documentation.

[matelich]

FWIW, this is how I pre-process my loaded SVG:

Snap.load(svg_path, function (data) { self.picto_svg = data.select('svg'); self.picto_svg.attr({ width: '100%', height: '100%', viewBox: '0 0 300 300' }); var paths = self.picto_svg.selectAll('path'); //simple paths.forEach(function (elem, i) { elem.attr({ stroke: 'black', fill: 'black', fillOpacity: 0.7, strokeWidth: 4 }); }); });

On Mon, Oct 3, 2016 at 8:47 AM, Rhywden [email protected] wrote:

Sorry, but "you have to do something" doesn't quite cut it. I also don't want to have to add some SVG elements just to get my existing SVG file to render in the way I want it. Also, "SelectAll" needs some kind of selector. When I'm loading in arbitrary files (they're autogenerated by another process), I can't be reasonably sure that "SelectAll" will actually encompass all the elements in the file.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/adobe-webplatform/Snap.svg/issues/420#issuecomment-251143179, or mute the thread https://github.com/notifications/unsubscribe-auth/AB0bpwz-u1AfV1Kix_2F-_wprHPagR9-ks5qwSOHgaJpZM4GpWis .

[ibrierley]

Without seeing any svg markup or code, 'do something' cuts it fine.

You don't need to add any elements if you have them in your markup, that was just an example. However, if you want to change something before appending it, you have to select it somehow. How and what, depends on your markup.

[Rhywden]

Well, that part I got working now, thanks to @matelich .

However, I ran into a bit of a problem when I then tried to add another element to the, erm, Paper, is it?

Because the external SVG stays on top of the scene, no matter where, when or how I add it to the paper. From the documentation regarding SVG, the z-index is decided by the order of definition.

But judging from the amount of code pushes to the repo ("2 years ago") this now looks like a rather dead project to me.

[ibrierley]

As they are in order as you mention to dictate which elements are on top, you can use after/before/insertAfter/insertBefore eg http://snapsvg.io/docs/#Element.after to place them.

[isaacalves]

I'm able to load a few SVGs and append them (the nodes) to a DOM element using:

container.appendChild( fragment.node.cloneNode(true) );

Now if I want to do the same, but by loading only one SVG file and extracting nodes from it, like:

let myElement = fragment.select( '#elementID' ); container.appendChild( myElement.node.cloneNode(true) );

...that doesn't work, and I assume it's because myElement is an element and not a fragment. myElement.node shows a tag that isn't wrapped by an SVG element.

Does that mean that I need to wrap an SVG element around myElement before appending it to another DOM element?

If that's the case, how do I wrap an SVG element around myElement so I can append it to another DOM element? I'm just assuming that this is what I need to do...is there any other solution for that?

[ibrierley]

I would put an example up somewhere of your code testing. It's not quite clear to me from the bit posted. Nor is it quite clear why you're doing it that way either (using lower level methods rather than just Snap).

[isaacalves]

I'm loading a bunch of SVG elements and randomically positioning them on the screen. For each time the app is loaded the user gets a different composition, and some elements might repeat, while some might not even show.

Initially I had a list of SVG files, each one with an element. But there seems to be two problems with this approach:

1. Too many http requests; 2) These elements contain ids with definitions of styling and gradients (not classes - styles already set to inline when exporting from Illustrator), and some of them end up affecting other elements.

A solution to both problems would be to have all elements in only one SVG file, so Adobe Illustrator will assign different ids to each element and the styles won't clash.

My idea is to load a big SVG file with all these elements, extract them with select() and append them to DOM elements.

Does that make sense? Is that the wrong approach?

[ibrierley]

That seems reasonable, maybe put an example that doesn't work on a jsfiddle or jsbin or whatever, so folk can look to see what aspect isn't working.