RuwixWhat is an SVG Image?
SVG stands for Scalable Vector Graphics. It's an image format that describes a picture with shapes, lines and colors instead of pixels. An SVG file is plain text written in XML-based markup, so a cube image is just a list of polygons with their corner coordinates and fill colors. Your browser reads these instructions and draws the picture at whatever size you need.
The format is an open standard developed by the W3C SVG Working Group: the work started in 1999, SVG 1.0 became an official W3C Recommendation on 4 September 2001, and SVG 1.1 followed in 2003. You can read the full history of the format on Wikipedia. Today every modern browser supports it, on desktop and mobile alike.
Why Use SVG Instead of PNG or JPG?
- Sharp at any size: a vector image never gets blurry or pixelated, it looks crisp on phones, retina screens and in print.
- Small files: a Rubik's Cube made with this generator is less than 3 KB, and the file stays the same size no matter how big you display it.
- Editable as text: you can open an SVG in any text editor and change a color without image editing software. The SVG cheat sheet shows all the shapes, paths and colors, with a live editor to try them out.
- Styling and animation: SVG works together with CSS and JavaScript, so you can change colors on hover or animate the shapes.
- Search engine friendly: SVG files can be searched, indexed and compressed, and they can contain titles and descriptions for screen readers.
Photos are still better as JPG, but for diagrams, icons, logos and puzzle illustrations SVG is usually the best choice. If you are not sure which one fits your image, this comparison of web image formats explains when to use JPG, PNG, GIF, WebP or SVG, and it can convert between them too.
How We Use This Generator on Ruwix
This tool was made for our own needs. We use it to create the cube images for the Rubik's Cube patterns gallery and the illustrations of the beginner's tutorial, from the white cross to the yellow cross and the last layer. There are more than 140 of these images on the website, and every one of them is only a few kilobytes, so the pages load fast even with dozens of cubes on them.
The same cube picture style shows up in the more patterns page too. If you want to show a moving cube instead of a still picture, try the 3D cube widget.
How to Use the SVG Generator
- Choose a color from the palette, or pick any color with the rainbow button.
- Click the stickers you want to color, or hold the mouse button and drag over several of them.
- Use Fill a face to color a whole side at once, or start from the Solved, Random or Clear presets.
- Set the image size, then press Download .svg or Copy code.
The address of the page saves your colors, so you can bookmark a cube or send the link to a friend.
How to Put an SVG on Your Website
The easiest way is to upload the downloaded file and use it like any other image:
<img src="rubiks-cube.svg" width="150" height="150" alt="Rubik's Cube pattern">
You can also paste the copied code straight into your HTML. This inline SVG doesn't need a separate file, and you can style its polygons with CSS.