What is "hero-arrow-white.svg" in Breakthrough Pro and how do I deal with it?

[Yumei]

Tried to test site speed on gtmetrix today and discovered a few issues. While I probably have to live with a few, this one confuses me. Apparently there is an image file that has compression issues:

wp-content/themes/breakthrough-pro/images/hero-arrow-white.svg (expiration not specified)

Why is there an svg file in the images folder (I thought you need a plugin to use svg images)? Can I change it to a png file?

Any insight will be appreciated!

https://academicassembly.com

[Victor Font]

You need a plugin to add SVG images to the media library, not to display SVG images on a site. SVG is a modern image technology called vector graphics. Rather than using pixels to construct the details of the images, SVG uses math to scale images so they remain crystal clear at any resolution. When you scale a jpg or png, they become pixelated and look fuzzy as you enlarge them.

SVGs are superior to jpg and png in size, quality, and scalability. I use them almost completely on my sites now, only using jop or png when I have no other choice.

The error you are seeing has nothing to do with compression. The arrow images for the hero section of Breakthrough Pro are less than 2k is size. How much do you want to compress an image that is 1,047 bytes?

This error: (expiration not specified), has to do with not specifying an expiration date for the svg+xml type so the server can provide instructions to the browser for for better cache control. The Expires headers are sent to the browser by Apache, your web server.

If you are using a caching plugin, this is something that you may be able to set yourself. You can also set this your self by editing your site's htaccess file, but if you've never done, as your host for help otherwise you can easily cause you website to crash.

On my server, this is what I use in my htaccess for the Expires Headers:

# Expires headers (for better cache control)
<IfModule mod_expires.c>
	ExpiresActive on
	# Perhaps better to whitelist expires rules? Perhaps.
	ExpiresDefault                              "access plus 1 month"
	# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
	ExpiresByType text/cache-manifest           "access plus 0 seconds"
	# Your document html
	ExpiresByType text/html                     "access plus 0 seconds"
	# Data
	ExpiresByType text/xml                      "access plus 0 seconds"
	ExpiresByType application/xml               "access plus 0 seconds"
	ExpiresByType application/json              "access plus 0 seconds"
	# Feed
	ExpiresByType application/rss+xml           "access plus 1 hour"
	ExpiresByType application/atom+xml          "access plus 1 hour"
	# Favicon (cannot be renamed)
	ExpiresByType image/x-icon                  "access plus 1 week"
	# Media: images, video, audio
	ExpiresByType image/gif                     "access plus 4 months"
	ExpiresByType image/png                     "access plus 4 months"
	ExpiresByType image/jpeg                    "access plus 4 months"
	ExpiresByType image/webp                    "access plus 4 months"
	ExpiresByType video/ogg                     "access plus 1 month"
	ExpiresByType audio/ogg                     "access plus 1 month"
	ExpiresByType video/mp4                     "access plus 1 month"
	ExpiresByType video/webm                    "access plus 1 month"
	# HTC files  (css3pie)
	ExpiresByType text/x-component              "access plus 1 month"
	# Webfonts
	ExpiresByType application/x-font-ttf        "access plus 1 month"
	ExpiresByType font/opentype                 "access plus 1 month"
	ExpiresByType application/x-font-woff       "access plus 1 month"
	ExpiresByType application/x-font-woff2      "access plus 1 month"
	ExpiresByType image/svg+xml                 "access plus 1 month"
	ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
	# CSS and JavaScript
	ExpiresByType text/css                      "access plus 1 year"
	ExpiresByType application/javascript        "access plus 1 year"
</IfModule>

This code is meant as an example only. DO NOT copy and paste it into your htaccess unless you know exactly what to do. You will crash your site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Yumei]

Thanks for the explanation and the example htaccess code.

The svg image comes with the theme (Breakthrough Pro)-I certainly didn't upload the file. So that's puzzlement #1.

#2: The svg image in question is indeed small-so I thought the error message lumped in with compression errors (all of them are small, <0.5k) might have other issues, such as needing a plugin for svg. But that doesn't make sense either.

I would love to use svg images on websites, tried a few plugins in the past. Which one(s) do you use?

[Victor Font]

This is the only plugin I use for SVG: https://wordpress.org/plugins/svg-support/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts