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

Modern mobile devices and high-resolution displays have fundamentally changed how we approach web graphics. Today's smartphones, tablets, and increasingly desktop monitors feature pixel densities that are 2–4 times higher than traditional screens, creating crisp, vibrant displays that demand equally sharp graphics.

While high-resolution raster images can meet these demands, they often come with prohibitive file sizes that impact performance—a critical consideration in our mobile-first world. SVG (Scalable Vector Graphics) offers an elegant solution for many graphics needs. Vector-based graphics like icons, logos, and illustrations not only scale perfectly across all devices but also maintain smaller file sizes and crisp edges at any resolution.

In this exercise, you'll master the practical implementation of SVG graphics in responsive web design, learning not just how to add them, but how to optimize their delivery and handle cross-browser compatibility issues that can trip up even experienced developers.

Adding SVG As an Image

1. Begin by closing any open files in your code editor to maintain focus and avoid confusion as we work with a new project structure.

2. Navigate to the Flix SVG folder located in Desktop > Class Files > yourname-Mobile and Responsive Class.

   For optimal workflow, display the entire project folder structure in your editor's sidebar. In Sublime Text, go to File > Open (Mac) or File > Open Folder (Windows), navigate to the Flix SVG directory, and select Open (Mac) or Select Folder (Windows). This project view helps you understand file relationships and navigate efficiently.

3. Open index.html from the Flix SVG folder.
4. Preview the page in Chrome to establish our baseline.

5. Resize your browser window to approximate a mobile viewport—roughly 375px wide. This mobile-first approach reflects current development best practices.

   Notice the header appears incomplete without the company logo. We've prepared an SVG version that will scale perfectly across all device resolutions while maintaining crisp edges and optimal file size.

   NOTE: The SVG logo was created with Adobe Illustrator, though other vector graphics applications like Sketch, Figma, or the open-source Inkscape can also export high-quality SVG files.

6. Keep Chrome open for live testing, then return to index.html in your code editor.
7. Locate line 15, which contains an empty link element designated for the homepage logo.

8. SVG graphics integrate seamlessly with standard HTML img tags. Add the following code:

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

9. Save the file and observe the immediate feedback loop that makes web development so rewarding.
10. Switch to Chrome and reload the page. The logo will appear dramatically oversized—this is expected behavior since SVG files without defined dimensions scale to fill their container.
11. Test the responsive behavior by resizing your browser window. Notice how the logo scales fluidly—this inherent scalability is SVG's greatest strength.
12. Now let's apply professional styling to integrate the logo properly into our design. Return to your code editor.
13. Open main.css from the css folder.
14. Find the header h1 rule on line 51.

15. Add the following CSS rule immediately below:

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

16. Save the file.

17. Refresh Chrome to see the logo now properly positioned and sized within the header layout. The logo should appear balanced and professional alongside the search functionality.

Adding More SVG Icons

Icons are perhaps the most compelling use case for SVG in modern web design. They're crisp at any size, infinitely scalable, and can be styled with CSS. Let's enhance our navigation with vector icons that will look perfect on any device.

1. Return to index.html in your code editor.
2. Beginning around line 30, enhance the navigation links by adding SVG icons. Insert the bold code shown below:
   

   <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: The empty ALT attribute follows accessibility best practices for decorative graphics. Screen readers will skip these icons since the link text already provides the necessary context.

3. Save the file and prepare to see the raw power of unstyled SVG.

4. Refresh Chrome and scroll to the bottom navigation area.

   The icons appear oversized—again, this is expected behavior. SVG files without explicit dimensions will scale to fill available space. This is actually a feature, not a bug, as it provides maximum flexibility for responsive design.

5. Switch back to main.css to implement proper icon sizing.
6. Locate the nav li rule on line 94.

7. Add this new rule above the existing nav li rule:

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

8. Save and preview the results in Chrome. The icons should now display at an appropriate size with comfortable spacing between the icons and their associated text labels.

SVG Sizing Issues in Internet Explorer & Microsoft Edge

While modern browsers handle SVG exceptionally well, legacy Internet Explorer versions and even Microsoft Edge can exhibit inconsistent sizing behavior. Understanding and addressing these issues is crucial for professional web development, even as IE usage continues to decline.

The most reliable approach—which we've implemented above—is to apply dimensions directly to the SVG's img element. However, when you size the containing element and allow the SVG to scale proportionally, IE 11 and earlier versions often miscalculate the height, creating unwanted whitespace as shown below.

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

1. To resolve IE and Edge sizing inconsistencies, we need to examine and modify the SVG file itself. Open logo.svg from the img folder in your code editor.

   SVG files are XML-based text files, making them human-readable and editable. While vector graphics applications typically generate these files, understanding their structure enables you to make targeted optimizations and fixes.

2. Examine line 4 and locate the viewBox="0 0 108 69" attribute. This defines the SVG's coordinate system and intrinsic dimensions—108 pixels wide by 69 pixels tall.

   NOTE: The viewBox uses four values: minimum x, minimum y, width, and height. Our logo spans from coordinates (0,0) to (108,69).

3. For Internet Explorer compatibility, add explicit width and height attributes by inserting the bold code:

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

4. Save the file.

5. While this change won't affect modern browsers, it provides the explicit dimensions that older IE versions require for proper rendering.

   Modern vector graphics applications vary in their SVG export quality. Professional tools like Sketch and Figma often include these attributes by default, while others may require manual addition or export setting adjustments.

   NOTE: Alternatively, you can address sizing issues by setting explicit height values in your CSS, though editing the SVG source is often more reliable.

Configuring the Web Server's .htaccess File for SVG

SVG files may display perfectly in your local development environment but fail when deployed to production servers. This common issue occurs because many Apache web servers—still powering a significant portion of the web—don't ship with proper SVG MIME type configuration.

The .htaccess file provides a powerful solution for configuring Apache servers without requiring server admin access. This plain-text configuration file can control everything from file type handling to performance optimizations.

We're using the battle-tested .htaccess file from HTML5 Boilerplate, which incorporates years of community knowledge and best practices for modern web development.

1. Open the .htaccess file located in the Flix SVG folder root directory.
2. Navigate to line 198.
3. Examine the AddType image/svg+xml svg svgz directive. This critical line instructs Apache to serve .svg and .svgz (compressed SVG) files with the correct MIME type, enabling proper browser rendering.

4. When deploying to production, upload this .htaccess file to your web server's root directory.

   Note for Mac users: .htaccess files are hidden by default in Finder, but most FTP applications and code editors display them normally. Look for options to "show hidden files" if you're having trouble locating the file during upload.

.htaccess Configuration: Gzip Compression

Performance optimization is non-negotiable in modern web development. Gzip compression can dramatically reduce file transfer sizes, particularly for text-based assets like HTML, CSS, JavaScript, and SVG files.

1. Navigate to line 714 to examine the gzip configuration section.

2. This configuration enables server-side compression that can reduce file sizes by 60-80% for text-based assets. The process is seamless: the server compresses files before transmission, and browsers automatically decompress them for rendering.

   SVG files, being XML-based text, benefit tremendously from gzip compression. A complex SVG file that might be larger than its PNG equivalent could become significantly smaller once compressed, making it the superior choice for both quality and performance.

   The configuration includes graceful degradation—browsers that don't support compression simply receive uncompressed files, ensuring universal compatibility.

.htaccess Configuration: Expires Headers

Browser caching is a powerful performance optimization that reduces server load and improves user experience by storing static assets locally. However, it requires strategic implementation to balance performance gains with content freshness.

1. Navigate to line 836 to review the caching configuration.

2. The expires headers implement a tiered caching strategy based on file types and update frequency:

   • CSS and JavaScript files: Cached for one year (these change infrequently)
   • HTML files: Never cached (ensuring users always receive current content)
   • Images and SVG: Cached for one month (balancing performance with reasonable update cycles)

3. Managing cache invalidation is crucial when updating cached assets. The industry-standard approach is cache busting through filename versioning. When updating main.css, rename it to main-v2.css and update all HTML references accordingly.

   This strategy forces browsers to download the updated file while maintaining aggressive caching for unchanged assets. Automated build tools can handle this process programmatically in production workflows.

.htaccess Configuration: Adding/Removing Www in URLs

URL canonicalization is a critical SEO consideration that many developers overlook. When your site is accessible at both www.example.com and example.com, search engines may treat these as separate entities, diluting your search authority and creating duplicate content issues.

Implementing a redirect strategy consolidates all traffic and search engine authority to a single canonical URL, improving your SEO performance and analytics accuracy.

1. Navigate to line 359 to examine the URL canonicalization options.
2. The configuration defaults to Option 1 (lines 378-385), which redirects www traffic to the non-www version. To prefer www URLs instead:
   • Enable Option 2 by removing the hash symbols (#) from lines 394–401
   • Disable Option 1 by adding hash symbols (#) to lines 380–385
   • Save the file to implement the changes

Choose your preferred URL structure based on your brand identity and stick with it consistently across all marketing materials and internal links.

The .htaccess file contains numerous other optimizations and configurations. Take time to explore the commented sections to understand additional performance and security enhancements available for your projects.