How can I load a custom svg in SVG JS

Question

I'm ripping apart a pong demo (https://css-tricks.com/pong-svg-js/) to learn about Javascript, SVGs, and SVG.js.

My version will draw a ball that bounces back and forth in the window. Using the "var ball = draw.circle(ballsize)" it works correctly, but when I try to substitute a custom SVG, it fails.

How can I correct this to draw my custom svg in place of the ball?

user_4996779 · Answer

Let's say you have a file containing the grafics of a tennis ball. I have selected that file for its minimal size, the markup content of something you would like to use could be much larger:

SVG.js would be able to reference that file in an SVG tag:

var ball = draw.image('/path/to/Twemoji12 1f3be.svg').size(ballsize, ballsize)

But that has a drawback: the ball is loaded from a separate file, you need a request for that that takes time to fullfill (just like with every image file).

But the ball is just something you can write into your main file. That is where the size of your grafic markup will make a difference.

Variant 1: draw every tag separately

This is what SVG.js is really meant to do.

// draw a wrapper element, here you would use a nested `

Frankly: this is just more work than you probably would like to do.

Variant 2: construct the elements from strings

var ball = SVG(``)
draw.add(ball).size(ballsize, ballsize)

A bit better, but at least I don't like mixing Javascript and markup inside the same file. I would go with a

Variant 3: bypass SVG.js and just write the markup in your HTML markup directly

I am saddling you with a high learning curve here, but ultimately you wanted to get that out of it, didn't you?

SVG contains its own templating mechanism, whith an element called . Here is how your initial markup could look:

What did I do here?

I copied the file content inside your wrapper
.
Then I inserted a element so that it wraps the grafical elements.
The element gets zero size, because it initially only contains the template (I'm simplifying.)
The viewBox attribute gets moved to the and a unique id is added.

Now, your script can work just as before. The line

var draw = SVG('pong').size(width, height)

would just insert a second element after that first, invisible one. But you could also pickup the first one and draw there. The initial zero size gets overwritten.

var draw = SVG('#pong svg').size(width, height)

In both variants, the ball is then used in the form of a reference:

var ball = draw.use('ball').size(ballsize, ballsize)

How can I load a custom svg in SVG JS

1 Answers