All about SVG (+ a quick how-to on using SVG with WordPress)

I’ve recently started working with a lot of SVG files in my personal website, and I’m excited to use the format in projects with clients, too. Here you can find a quick overview of SVG: what it is (and what vector graphics in general are), when to use it, and how to use it with WordPress.

Skill level for this article

This is intended to be a very basic guide for those completely new to SVG. If you don’t know or aren’t sure what vector graphics are, this is probably a good starting point for you.

If you’re looking for more advanced articles on SVG usage, I recommend Sara Soueidan’s articles on SVG as an excellent starting point to really delving into the capabilities of SVG.

What is SVG?

SVG stands for Scalable Vector Graphics. We’re talking about vector graphics here, versus raster graphics (JPG and PNG are examples of raster graphics). Let’s step back a second and look at the difference between vector and raster graphics.

Continue reading “All about SVG (+ a quick how-to on using SVG with WordPress)”

Dec/Jan site redesign, SVGs, speed optimization, & more

At the end of 2015, I started designing the newest version of my online portfolio. During this redesign, I focused a lot of my time getting accustomed to using Inkscape — an open-source vector graphics editor (and a good free alternative to Adobe Illustrator).

I haven’t been disappointed with Inkscape. It has a pretty normal learning curve for a graphics editor, in my opinion, with an understandable interface and manuals and other resources available when needed. I found that I was able to figure out the basics for the most part, and anything more complex or confusing was usually solvable with a quick Google search.

After becoming comfortable with Inkscape, I was ready to create SVG files. The benefits of SVG or other vector graphic options over raster images (like PNG and JPG) are already well-known, but just in case: SVG stands for Scalable Vector Graphic, and they do just that — they are vector graphics that scale. What that means is that SVGs preserve shape(s) and pixel quality when being resized, which is great for things like logos, icons, and the type of illustrations I created for this project. (SVGs are not so useful when it comes to photographs or images with a lot of textures and gradients.)

SVG beats PNG in terms of file size, too. I found (at least in this project) that all of my SVG files were noticeably smaller than saving the same image as a PNG. And once I enabled SVGZ (a compressed version of SVG), I was able to save on even more weight.

The weight of the page was another major focus in this redesign project. I used Google’s speed developer tool — PageSpeed Insights — to check the performance of the finished project, and followed (many of) the suggestions in areas needing improvement.

I say that I followed “many of” the suggestions — the main suggestion that I’ve yet to implement is the optimization of PNG images. That’s because, for the most part, all of the PNGs on the current version of the site should only be loading as fallbacks — in case a browser doesn’t or can’t load the corresponding SVG.

Besides researching these tools and resources, I also spent a good amount of time simply… creating the design. Throughout the design process, I knew that I wanted the finished product to be:

  1. Clean, crisp, & flat – I like sites that are clean and simple while still interesting, preferably with flat design elements and a modern color scheme.
  2. Illustrated and presented in a way that features my graphic design work as well as my code – Previous versions of my portfolio haven’t really incorporated much of my graphic design and illustration work, but I always knew that once I had time I would really like to make a new version that did. I built the header design around the idea of a shelf, with various items (books, tea mug, snow globe, etc.) collected on it. This is my portfolio site, so I wanted it to have some fun/whimsy added in to distinguish it and really make it mine.
  3. Supplemented with unique icons – I really like Fontawesome, but I decided that this time I wanted to create my own graphics that could (I hope) represent recognizable scenes and ideas, while also adding that personal feel.
  4. Responsive – Of course, I knew the site would be responsive, and this was a working foundation throughout my design process. The header image, I decided early on, would scale with the screen size (hooray for SVGs!) and work as a horizontal separator above the main page content. And as the main body of the pages developed, I knew it would start out as a single column on mobile devices and smaller screen sizes, expanding into the two-column layout seen in the Photoshop mockup image featured in this post.
  5. Accessible – Accessibility was pretty easy to work into this project. I tried to keep an eye out for color combinations that were not only aesthetically pleasing, but also legible. And, as per usual, I’ve performed keyboard-only navigation tests which have been successful in my findings.