Articles

Linkedin: Posted on www.linkedin.com
January 19, 2017 | Revised August 20, 2020

SVG and CSS3 Snowflake

SVG, or Scalable Vector Graphics, are not as well-known as other web image formats such as JPEGs, gifs, and PNGs. SVG is a vector format that offers the advantage of being able to scale without losing detail. JPEGs have compression built with a trade-off between file size and image quality. Saving and resaving JPEGS can give some undesirable results such as images breaking down to jagged blocks of color. Creating SVG files of graphics like logos, arrows, and buttons avoids this issue, and the result is files that look great at all screen resolutions.

>

Snowflake SVG Image above - Check caniuse.com if you don't see sample.

Two ways to add the SVG image to a web page are with the image tag <img src="snowflake.svg"> and to add as XML. The course You, Me and SVG teaches how to write the XML, eXtensible Markup Language. The lines, geometric shapes, and blocks are written as points of coordinates. This language can look quite complicated very quickly. The hexagon points in the snowflake example are written this way.

points="300,150 225,280 75,280 0,150 75,20 225,20"

The big plus for doing it this way is that you can style the SVG code with CSS—cascading style sheets. In my example, I used the same set of points for the six snowflake arms. The CSS rotates them into position, changes the color, and can also change the stroke (line) size and opacity.

I used one my favorite Adobe Apps, Illustrator, to create the XML or points of coordinates for the snowflake arm. First, I drew one side of the arm and then rotated and joined the sides. At that point, I did a “save as” and chose SVG. The dialog box gives you options to save as a graphic or XML code. The code is then displayed in a text document. I only used the path information, pasted that into an HTML page, and then created my own styles.

There are other SVG generators available. I am an Illustrator fan and enjoy finding new ways to use the application. In the past, I have used it to export vector images into Flash in order to animate or to create graphics and charts. Years ago, fabric designs were done with an opaque watercolor named gouache. Gouache is a lovely paint. I have often heard other artists talk about a set they got from France or Italy that was magical and had colors they had never seen before or since. Getting the color flat and even for fabric designs was a tricky task that required lots of patience and skill. Illustrator vector graphics can create files with the similar color look that can be more easily changed and updated. However, if you find that magical brand of gouache please let me know!

View the example on Codepen

See the Pen Snowflake -SVG and CSS3 by Carol Hicks (@C_Hicks) on CodePen.