Weird SVG costumes from JS

(This is a template, feel free to delete it.)

What's problem you are encountering?
My generated SVG costume looks weird, even though it looks fine when rendered somewhere else.

Snap

Pic from stage morph:

Stage

Screenshot:

image

How it's supposed to look like: (view in a browser tab)

open me

Post a project example, link, or screenshot:
https://snap.berkeley.edu/snap/snap.html#present:Username=rixthetyrunt&ProjectName=weird%20svg%20rendering

This usually happens when the window (it must be borne in mind that the SVG image has its own dimensions) is smaller than the drawn figure itself

The built-in costume loader primitive (cst_load), used to load your SVG...
untitled script pic - 2024-09-01T185242.300

And where did block "SVG 2 Costume" come from?

I just started learning Snap. Can you please explain what this means?

Dardoro made it himself, I assume.

Don't worry about it, it's a special, more advanced thing. "primitive cst_load" just means that Snap! can load images from URLs. :slight_smile:

I do want to clear a misconception here. cst_load(url) is not a primitive function, it's an extension function. The extension block was just named "primitive" in snap 9, but was renamed to it's actual function, "extension".

@tvorimvsevmeste what the SVG to costume block is doing, is just creating a data url of the input svg (which just turns some file into a url, such as svg text), and the load it with this block.

Of course you (usually) never have to see this block outside custom blocks, because the extension blocks are meant to be used inside custom blocks, not really by average users (or at least, you're meant to create a custom block that uses the extension function you want, so it can be a lot more clear as to what the block is doing).

Thanks @ego-lay_atman-bay. I got it in general. But nevertheless @dardoro gave an example of two homemade blocks "SVG 2 Costume ()" and "*()..."
Is it possible to see THEIR structure somehow?

You can actually drag and drop the script pic into snap (or download the image, and import it), and then you'll get the blocks from the image, which allows you to see the block definition, and see how they made the block.

Exactly

It's a very tiny wrapper over built-in functionality (now called "extension").

Just a variadic, multiline input to format long text in a more convenient way.

untitled script pic (1)

The problem is... it doesn't load for me (I didn't add newlines, maybe that's why? would be weird if so). It just clips out most of my costume and console.logging it gives us a Costume rather than a SVG_Costume

"viewbox" is wrong. Should be "0 0 2 0.75" not
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0.75 2"> <path d="M0,0 1,0.375 2,0 1,0.75 Z" fill="Black"/></svg>

You should carefully examine every step of your code and intermediate values.

Oh :stuck_out_tongue:
Mustve mixedup my conversion from JS to Snap! of the return result...

It works! Cool. I didn't know instantiating an SVG_Costume doesn't work that well.

The More You Know™

But it was already 0 0 2 0.75...

No. "viewbox of path" messed it up.

Here's the original svg.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 0.75">
  <path d="M0,0 1,0.375 2,0 1,0.75 Z" fill="Black"/>
</svg>

It has the viewBox set to 0 0 2 0.75, and I have no idea what you mean by "viewbox of path" because there's just a viewbox on the whole svg, not just the path.

weird svg rendering script pic (1)

now...

You may debug the original procedure to test why the size of the SVG_costume does not match declared viewbox. Of course you should note that loading image by data-URL may be asynchronous.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.