Ever wonder what’s better, an embedded vector or an SVG image, why a vector can cause performance issues or when image are better, well, we did some research and testing for you.
So the other day I had a LCP issue in Google Pagespeed, and yeah, the culprit was a SVG, and I just couldn’t wrap my head around it, I tried a ton of things, no offence, page speed documentation is sometimes just completely useless useless. In the end I went with a WebP, but I digress, the whole investigation sent me down a SVG rabbit whole, and I thought, well, it’d be nicer if I just wrote a post about what I read, since, well, we’ve never touched on SVGs, so yeah, here’s a post about vector graphics, and Webflow, I guess. (FYI, it was the physical dimensions of the SVG that was causing the issue, but that’s a whole other Google PageSpeed rabbit hole.
What are Vector Images?
Vector graphics are defined by paths, which consist of points connected by lines and curves to form polygons and other shapes. Essentially, shapes defined on a cartesian plane. Unlike raster graphics, which rely on pixels, vector images are scalable to any size without loss of quality. This makes them ideal for logos, icons, and other graphics where clarity and flexibility are essential. Which in turn means they excel at simple shapes, but fall flat when they need to be super complex.
The Evolution of Vector Graphics
Vector graphics date back to the early days of computer graphics when storage and efficiency were paramount. With the advent of personal computing, vector-based applications like Adobe Illustrator and CorelDRAW brought these graphics to the forefront of design, revolutionising how we create and interact with digital images.
The introduction of SVG (Scalable Vector Graphics) in the late 1990s marked a significant milestone, as SVGs are XML-based files that can be created and edited with any text editor and manipulated with CSS and JavaScript.
Implementing SVGs in Webflow
So, getting back to what’s more important us Webflow designers, we can easily add vectors in two main ways, embeds, i.e. embedding the code directly in Webflow in an embed, or adding them as images. They both have advantages and disadvantages.
Embedding SVG Code Directly
Directly embedding SVG code into your HTML can enhance load times and reduce HTTP requests, crucial for achieving faster page load speeds. This approach is particularly beneficial for simple graphics that form an integral part of the website's design, allowing them to scale seamlessly across different devices.
Naturally more complex vectors are an issue here, the HTTP request can become huge. Then there are other things to consider, where does it sit in the document, how many times is the vector used on the page and the site as a whole (an SVG image might be better for caching), are there interactions, cause you can do cool things with embedded SVGs, variables and Webflow interactions.
Using External SVG Files
External SVG files are beneficial for complex or frequently updated graphics. By referencing external files, you can leverage browser caching to speed up page loads on subsequent visits. However, this method introduces additional HTTP requests, so it's crucial to use it judiciously.
Always a catch 22, for both external SVGs and embeds, and well, for the most optimised site you just have to decide as you build, using your design as a guide.
SVGs and Web Performance
Impact on Page Speed
SVGs can significantly affect web performance. Due to their small size and scalability, they are often faster to load compared to raster images. However, the method of integration (embedded vs. external) also plays a role in how SVGs impact performance.
Largest Contentful Paint (LCP)
SVGs can improve LCP, a critical metric in Google's Core Web Vitals. By optimizing how SVGs are loaded (e.g., prioritizing above-the-fold content), you can enhance perceived performance and user experience.
Advanced Optimization Techniques
- Minimize SVG Code: Use tools like SVGOMG to reduce unnecessary data in SVG files, decreasing file sizes. I literally can’t stress this enough, use SVGOMG. You SVGs will become minuscule and paste the SVG code straight into the site, and copy again, so I just copy every single svg/vector in Figma as an SVG and paste it straight into SVGOMG and then I either save the SVG or copy again if I’m gonna embed. The site’s been an eye-opener. It’s a simple workflow for a small Webflow Studio like ours, but it gives us that teensy bit of extra performance when it’s all added up.
- Efficient Animation: When animating SVGs, use CSS animations or JavaScript sparingly to avoid heavy computational loads that can impact performance metrics like LCP.
- HTTP/2 for External Files: Utilize HTTP/2's capabilities for faster parallel loading of SVGs to improve initial page load times. (Cloudflare’s good for this)
- Complexity: WebP might be a better alternative, even at 2X with transparency than extremely complex SVGs.
Leveraging Webflow Variables for Dynamic SVG Animation
Webflow’s introduction of CSS Variables opens up dynamic possibilities for animating SVGs directly embedded in your HTML. This method allows you to change properties like color, size, and stroke dynamically, based on user interactions or other conditions set within Webflow.
Animating SVGs with Webflow Variables:
- Color and Opacity Changes: Define CSS variables for color and use them within the SVG code. Adjust these variables based on scroll position or other triggers in Webflow to create engaging, interactive effects.
- Size Adjustments: Use CSS variables to adjust the width, height, or other dimensions of SVG elements dynamically. This can make elements grow or shrink in response to user interactions.
- Complexity and Performance: While CSS variables offer powerful ways to animate and adjust SVGs, be mindful of the complexity of the SVGs used. Complex SVGs with many paths and detailed effects can significantly increase the load times and affect performance negatively.
When to Embed SVGs vs. Use as External Files
Embedded SVGs are best for:
- Small, simple icons and graphics that benefit from being styled and manipulated directly within the HTML or CSS.
- Designs that require dynamic manipulation based on interaction or real-time conditions.
External SVG files are preferred for:
- Large, complex graphics that are used across multiple pages of a site, benefiting from browser caching.
- Graphics that do not need to be manipulated dynamically or those that are infrequently updated.
By understanding these nuances and leveraging Webflow’s powerful design capabilities, you can optimize the use and performance of SVGs in your projects, ensuring a fast, engaging, and visually appealing website.
So yeah, not world changing stuff, but useful to know and might just give you a little boost. FYI Cloudflare’s a good option here, it can’t optimise an SVG, but it can cache it close to the user, so check out this other post of ours.
