Flix: SVG (Scalable Vector Graphics) & .htaccess Files

Topics covered in this Mobile & Responsive Web Design tutorial:

Adding SVG as an image, Setting SVG width & height, Configuring the web server’s .htaccess file for SVG, Additional configuration with the .htaccess file

Exercise Preview

Exercise Overview

Most, if not all, of today’s mobile devices (phones and tablets) feature high resolution screens that are typically 2–3 times the pixel density of older screens. Some laptops and desktop monitors are also hi-res, but many still lag behind mobile devices, which are replaced at a faster pace.

While we can make high resolution pixel-based graphics, these files often come with the expense of heavy file size. Today we can safely use SVG (scalable vector graphics) whenever appropriate. While not everything is vector-based (photos are still best as pixel-based files), graphics such as icons and logos are best created and saved as SVG.

Adding SVG as an Image

1. We’ll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion.

2. For this exercise we’ll be working with the Flix SVG folder located in Desktop > Class Files > yourname-Mobile and Responsive Class.

   It’s beneficial to see the entire website folder as you work. Many code editors allow you to do so. If you are working in Sublime Text, for instance, you can go to File > Open (Mac) or File > Open Folder (Windows), navigate to Desktop > Class Files > yourname-Mobile and Responsive Class > Flix SVG and hit Open (Mac) or Select Folder (Windows).

3. Open index.html from the Flix SVG folder.
4. Preview the page in Chrome.

5. We’ve started developing the mobile version of this page and haven’t gotten to the desktop version yet, so resize the browser window to a smaller size, approximating a mobile device.

   Most of the page is done, although the header looks a bit odd because it’s missing the company logo. We’ve prepared an SVG version of the logo that you’ll add here.

   NOTE: The SVG logo we’re providing was created with Adobe Illustrator, but other vector graphics programs (such as Sketch, Inkscape, etc.) can save SVG files.

6. Keep the page open in Chrome, but switch back to index.html in your code editor.
7. Find line 15, which is an empty line inside a link to the homepage.

8. We can insert an SVG graphic using a standard img tag! Add the following bold code:

   <a href="index.html">
      <img src="img/logo.svg" class="logo" alt="Flix">
   </a>
   

9. Save the file.
10. Switch to Chrome and reload the page. Wow, you should see a huge logo appear!
11. Resize the window to see that the logo resizes (because it has no predefined width).
12. Let’s make the logo smaller, and move it to the left of the Search field. Switch back to your code editor.
13. Open main.css from the css folder.
14. On line 51 find the header h1 rule.

15. Below that rule, add the following:

    header .logo {
       width: 100px;
       float: left;
       margin: 9px 0;
    }
    

16. Save the file.

17. Switch to Chrome and reload the page. The logo should now look properly positioned in the header.

Adding More SVG

Let’s add a few more SVG icons to navigation links at the bottom of the page.

1. Switch back to index.html in your code editor.
2. Starting around line 30, add the following four SVG images shown in bold:
   

   <li>
      <a href="#">
         <img src="img/icons/movies.svg" alt=""> Movies
      </a>
   </li>
   <li>
      <a href="#">
         <img src="img/icons/theaters.svg" alt=""> Theaters
      </a>
   </li>
   <li>
      <a href="#">
         <img src="img/icons/blog.svg" alt=""> Blog
      </a>
   </li>
   <li>
      <a href="login.html">
         <img src="img/icons/account.svg" alt=""> My Account
      </a>
   </li>
   

   NOTE: Notice the empty alt attribute. That is a best practice for purely decorative graphics, such as these icons.

3. Save the file.

4. Switch to Chrome and reload the page.

   In the bottom navigation area, you should now see huge icons that you’ll have to scroll down to see. We don’t want them so large, so we’ll have to scale them down via CSS. Like the logo, these SVG files do not have a predefined size, so they automatically scale.

5. Switch back to main.css in your code editor.
6. On line 94 find the nav li rule.

7. Add the following new rule above that:

   nav img {
      width: 33px;
      margin-right: 15px;
   }
   

8. Save the file and preview index.html in a browser. Now the icons should be an appropriate size, with a little space between them and the text to the right.

SVG Sizing Issues in Internet Explorer & Microsoft Edge

This page will display great in all modern browsers, but IE 11 and older can sometimes mess up the sizing of the SVG graphics. Even Microsoft Edge can get it wrong! We applied the size directly to the SVG’s img tag, which is the most reliable method. However if you size the containing tag (div, li, a, etc.) and allow the SVG img to be scaled to fit the container, IE 11 and older will typically mess up the height of the SVG, adding extra space as shown below.

Photos courtesy of istockphoto, unizyne, Image #19302441, Sergey Kashkin, Image #318828.

1. When IE or Edge get the height of SVG wrong, let’s see how to fix this issue. In your code editor (Sublime Text, etc) open logo.svg from the img folder.

   SVG files are text files coded with XML (EXtensible Markup Language). XML and HTML are both markup languages with many similarities, so the syntax should not look completely foreign. While you’ll typically create SVG files using a graphics app, you could hand code them.

2. On line 4 notice the SVG contains viewBox=“0 0 108 69” which tells us the SVG file is 108 pixels wide by 69 pixels tall.

   NOTE: The numbers are coordinates. The top-left corner of the box starts at 0 from the left and 0 from the top and the bottom-right corner ends at 108 pixels from the left and 69 pixels from the top.

3. For older versions of IE, we need to add width and height attributes, so add the folding bold code:

   viewBox="0 0 108 69" width="108" height="69" enable-background="new 0 0 108 69"
   

4. Save the file.

5. This change didn’t affect the display of this page, but if IE 11 or older were having sizing issues, you’d notice they should set the height correctly.

   Many vector graphics apps can create SVG files, but the quality of the coding can vary. Some programs (such as Sketch or Inkscape) will add the width/height for you.

   NOTE: Instead of editing the SVG file directly, you can also set a height in CSS.

Configuring the Web Server’s .htaccess File for SVG

SVG files should display locally, but they may not work once you upload them to a web server! Apache is a very common web server, and it may not be configured properly for SVG files. If you upload your files and the SVG files do not display, you’ll need to fix the configuration of Apache servers using an .htaccess file. This file is typically invisible on Unix based computers (such as Macs) but most code editors will let you create, see, and edit them.

There are many things you can control with an .htaccess file, and HTML5 Boilerplate has a starter .htaccess file with all the code we need and tons of great comments! We visited html5boilerplate.com and clicked the Source Code button to go to their GitHub page. In the dist folder they have an .htaccess file that we’ve downloaded for you.

1. In your code editor, open the .htaccess file inside the Flix SVG folder.
2. Go to line 198.
3. Notice the AddType image/svg+xml  svg svgz code. This tells the server how to treat .svg or .svgz (zipped) files. You don’t have to change anything here, we just wanted to point out the required code.

4. You’ll need to upload this file, but if you’re on a Mac you can’t see it on your Desktop. Most FTP apps have a two-pane view (local and remote files) which show invisible files, so you should be able to see it there.

   If you’re using a single-pane FTP app like Cyberduck, there’s typically an upload feature (such as File > Upload) and there you can usually show hidden files.

.htaccess Configuration: Gzip

While we’re talking about the .htaccess file, let’s look at some other things we can control with it.

1. Go to line 714.

2. This section enables gzip compression. When gzip is enabled on the server, the web server will compress the files, send them to the browser, and the browser will decompress them. This means smaller files and faster downloads. Most browsers support gzip, so most people will benefit. If the browser does not support gzip, the server will send the normal uncompressed files, so you’re fine either way!

   This can save a lot of file size for text such as HTML, CSS, JS, and even SVG! Pixel-based graphics like JPEGs don’t get gzipped (they were already compressed). If you have an SVG file that is a bit larger than a hi-res PNG, it may end up being considerably smaller when gzip is enabled, so keep that in mind.

.htaccess Configuration: Expires Headers

1. Go to line 836.

2. This section tells browsers how long to cache files. For faster page loading, when a visitor goes back to a page, it should pull from cache instead of re-downloading the file. In this section notice the following:

   • CSS files will be cached for a year.
   • HTML files are not cached (so visitors always get the latest page).
   • JavaScript files will be cached for a year.
   • Media/Graphics such as SVG, PNG, JPEG, and GIF will be cached for a month.

3. Caching can be great for performance, but keep in mind that some visitors may not re-download those files until the cache expires. So if you update the CSS, JS, images, etc. you must ensure visitors get the new version, instead of the one they have cached.

   To force browsers to download the newest version (called busting the cache), you should rename the file. You could add a version number, so main.css could be renamed to something like main-v2.css. Don’t forget to then do a Find/Replace to update the links in your HTML files that point to the file!

   HTML files are unaffected (they are not cached), so do not version them.

.htaccess Configuration: Adding/Removing www in URLs

Be default, you can visit a website at http://www.mysite.com or http://mysite.com. Notice that one of those URLs has a www and the other does not. When some people link to your site with www, and other people link to it without www, search engines see those URLs as different pages, which is not good for SEO (search engine optimization).

You want the search relevance combined and tracked as a single page. For that reason, you want to decide if you like the www or not, and redirect visitors to the single URL you decide on. There’s a lot of debate as to which you should choose, with some large websites on both sides of the debate, so we’ll leave it up to you to decide.

1. Go to line 359. This section lets you redirect people to the URL of your choice.
2. Starting on line 378, Option 1 is enabled by default. People going to www.mysite.com will be redirected to mysite.com. If you prefer to have the www instead of this, you must:
   • Enable Option 2 by removing the hashtags (#) at the start of lines 394–401.
   • Disable Option 1 by adding hashtags (#) to the start of lines 380–385.
   • Save the file.

Those are the main points we wanted to point out in the .htaccess file, but feel free to look around and read more.