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).

Design plan for my portfolio, made in Photoshop.

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.

Some WordPress updates

My WordPress theme, Heidi, has been approved by the Theme Review team, and is now available for download from the WP theme directory! The theme review process was pretty straightforward; the longest part was waiting for reviewers to be available to look at the theme. My theme was reviewed by two individuals, and each supplied some minor changes to make in the code. There was no request to change any of the aesthetics of the theme, and overall I found the process simple enough.

In other WordPress theme news, I recently put together a custom theme for New Song church. They had previously been using a pre-made theme I had selected for them. The new theme is inspired by the simple and clean look of that theme, but also incorporates customizable color schemes and an easy option to switch out the header image in the WordPress customizer.

Finally, I’ve updated the theme of this blog (previously running the pre-release version of Heidi). While the rest of the site is my own static HTML & CSS design, this blog is running a WordPress theme designed/coded by me that now fits in seamlessly with the other pages.

Following the success of my first public WordPress theme, I hope to have the opportunity to design some more themes for submission to the WP directory!

Independent Study – Final Review

Overview of the Semester

My work this semester has been invaluable in adding to my knowledge of web design and development. I feel that I have gained a lot of knowledge in WordPress and JavaScript in particular. I believe I have accomplished my goals laid out in my initial proposal and syllabus for this Independent Study. I have a much better understanding of languages like PHP and JavaScript, which will serve me well in future projects. I’ve looked at some examples of current trends for library websites, particularly in the week of June 10th when I looked at WordPress and libraries. These observations were carried over into my needs analysis and design plan for my theme. Finally, I synthesized these skills together in the creation of my own WordPress theme which has been submitted to the Theme Review process.

A large issue this semester was making sure I had a good outline of activities to follow week to week. Without this overarching structure, I think it would have been much harder for me to tackle all the different aspects of web design I hoped to. I think having a detailed syllabus to guide myself through the semester — while also leaving that syllabus open to alterations, which I made, especially in regards to JavaScript — was a successful approach for me. I like having the freedom to change and shift my focus in projects, but I really appreciate having a structure or schedule to follow, so I think this set up worked well for me personally.

Continue reading “Independent Study – Final Review”

Finished WordPress Theme

My finished WordPress theme has been submitted to the Theme Directory and is awaiting review! It passed the initial automated check and will now be looked at by someone in the WordPress theme review team.

On my personal site, I’ve written up a quick description and intro to the theme. I also have uploaded the theme in a live preview.

When preparing my theme for submission, the following resources were exceptionally helpful in double checking things:

And of course, I also looked at the WordPress Theme Review Handbook.

Next week I’ll wrap up here with a summary of my experience working on this theme, and some overall thoughts on this semester’s work. (And hopefully by then I’ll have an update on the status of the theme’s acceptance into the WordPress Theme Directory, too!)

In addition to the work finishing up the theme this week, I also finished a complete re-design of my personal site. In particular, I updated the Portfolio section to include more detailed pages with descriptions of the work I’ve done in specific projects.