Render Points with SVGg

The <Point> component will be the foundation of our game’s presentation layer. We’ll use points both to construct pentomino shapes for our palette and to draw the single rectangular puzzle board shape. We’ll render an individual point with SVG, but before we write that code let’s take a moment to dig into what SVG is and how it works.

What is SVG?

SVG stands for “Scalable Vector Graphics”. It is a text-based markup language for describing vector graphics that can be rendered cleanly at any size. Vector graphics are different from those rendered in formats like JPEG, PNG, and GIFs. Raster graphics light up individual points called pixels in a specified color. Instead, with vector graphics, we’ll use text to specify and assemble shapes.

Since SVG uses text to build shapes and images, it’s the perfect fit for rendering images with LiveView. Changes to the LiveView’s state will cause the template to re-render, allowing LiveView to update just the part of the text-based SVG image that needs changing.

It’s time to write your own SVG, starting with a 10x10 square SVG point. We’ll start by rendering a simple SVG square. Then, we’ll wrap that SVG markup in a small, stateless Surface component.

Building the SVG point

First up, let’s start by rendering an SVG square directly in the Game LiveView. To do so, we open up the GameLive module in pento/lib/pento_web/live/pento/game_live.ex and add the square below the title, like this: