Pseudo-3D element

Working with Zdog you face many decisions. It is helpful to have a plan early on, a map to guide you to the right classes, the fitting properties. As you complete the illustration, however, you face one more challenge: SVG or canvas? Where to show your remarkable graphic, an <svg> element or a <canvas> node? The specification has a few suggestions, but personally, I have a few ways to answer the question.

SVG

In an unsurprising twist, given the scope of this website, the first answer is <svg>. SVG by default. I’ve written a few articles on the many elements, the many attributes compounding the ludicrous number of features you can achieve with the format. And even with Zdog there are benefits to sticking with vectors, starting with the node itself.

<svg>
	<!-- ... -->
</svg>

The JavaScript library replaces the contents of the <svg> when called to action, but until it is, you can safely rely on a fallback visual.

When the library works, you still have the <svg> on the page, just with a new host of elements marking the shapes in higher dimensions.

A new set of elements and attributes, leading to another perk. You can inspect the page, you can look through the syntax. Chances are, you are not going to author pseudo-3D graphics by hand any time soon, but you can learn a lot from the source code. How the library leans on the stroke attribute to add a sense of depth. How the library manages the order of elements to emulate the z-axis with judicious overlaps. Even a few tricks which might save you a few keystrokes the moment you are going to write SVG yourself.

Consider the first group element included in the document as an all-wrapping container.

<g stroke-linecap="round" stroke-linejoin="round">
	<!-- ... -->
</g>

Zdog sets the stroke-linecap and stroke-linejoin attributes to round. If there are SVG elements with only a fill, the two won’t change the aspect of the corresponding visual at all. If there are shapes with a stroke, these will share smooth ends and edges. It’s a sensible default, and a pretty convenient instruction for soft, welcoming graphics.

It may be an extremely specific example, but again made possible by SVG, by the very simple fact you can inspect the page and find the building pieces. For the same token, however, it is also the reason you might prefer a <canvas> instead.

Canvas

Limit yourself to a few classes and SVG works as a solid option. You get to appreciate the syntax and the matching shapes. As the number increases, however, the document becomes heavy. The lean <svg> node is balloons to a considerable size, weighing on the page and your conscience. Even more if you wish to animate the shapes in all the possible ways afforded by the library.

With SVG the animation is choppy, staggers as the browser tries to update the page. Do not worry, I won’t subject neither you nor your browser to the painful test. Suffice it to say, this is the place where a <canvas> works best.

---

SVG, canvas. Technically, the answer to the question is either.

const element = document.querySelector('#target');

const illustration = new Zdog.Illustration({
	element
});

Acknowledging this, you have to weigh your options. Accept, and possibly lean on, your own bias, your preference, but be vigilant and ready to pick a less safer route. You work best with what you prefer, but the ultimate goal is to achieve an impressive feat. There’s plenty to explore, plenty to gain in the process, even if you end up using both.