Vector Graphics in Webflow: SVG Embed vs Image and LCP Speed

So the other day I had an LCP issue in Google PageSpeed, and yeah, the culprit was an 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. In the end I went with a WebP, but I digress, the whole investigation sent me down an SVG rabbit hole, 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 to 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 cleanly across different devices.

Naturally more complex vectors are an issue here, the HTML 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 use 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 optimising how SVGs are loaded (e.g., prioritising above-the-fold content), you can enhance perceived performance and user experience.

One thing worth knowing: an embedded (inline) SVG is never counted as the LCP element, only an SVG loaded as an image is. So if an SVG ever shows up as your LCP element in PageSpeed, it is an external one.

Advanced optimisation techniques

Minimise 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. Your SVGs will become minuscule, and you can paste the SVG code straight into the site and copy it 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: Use HTTP/2's capabilities for faster parallel loading of SVGs to improve initial page load times. (Cloudflare’s good for this, and our 2026 Cloudflare guide is the newer take)
Complexity: WebP might be a better alternative, even at 2X with transparency than extremely complex SVGs.

Using 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 colour, size, and stroke dynamically, based on user interactions or other conditions set within Webflow. Webflow’s Interactions with GSAP can now animate variables directly too, with an Animate variable action that tweens colour, size, percentage and number variables, so you can drive an embedded SVG from an interaction without writing any JavaScript. If you want to get the timing right, our visual guide to easing functions in Webflow helps, and for more on how we build motion in general there’s our post on dynamic animations in Webflow.

Animating SVGs with Webflow Variables:

Colour and opacity changes: Define CSS variables for colour 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 them 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 using Webflow’s powerful design capabilities, you can optimise 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 won’t resize or convert an SVG the way it does a JPEG or PNG, but it can cache it close to the user and compress it, so check out this other post of ours.

Vector graphics in Webflow: quick answers

What are vector graphics?

Vector graphics are images defined by maths rather than pixels: paths made of points, lines and curves. Because of that they scale to any size without losing quality, which makes them ideal for logos and icons, and a poor fit for very complex, photo-like images.

Is it better to embed an SVG or use it as an image in Webflow?

It depends on the graphic. Embed small, simple icons and anything you want to style or animate with CSS, variables or interactions. Use an external SVG file for larger or complex graphics that repeat across many pages, since the browser can cache the file.

Can an SVG cause an LCP problem in Webflow?

Yes, but only for an external SVG. An embedded (inline) SVG is never counted as the LCP element, only an SVG loaded as an image is. In my case the physical dimensions of the SVG were the culprit, and a WebP fixed it. Very complex SVGs also bloat the page or take longer to parse, so if an SVG shows up as your LCP element, test it against a WebP.

How do I make an SVG smaller before adding it to Webflow?

Run it through SVGOMG to strip the unnecessary data, then either save the file or copy the code and paste it into an embed.

Does Cloudflare optimise SVGs?

Not in the way it optimises JPEG or PNG images, as it does not resize or convert SVGs, but it caches them close to the user and compresses them. Our 2026 Cloudflare guide covers the setup.