How to Use SVG Files in HTML and CSS

SVG (Scalable Vector Graphics) is a powerful tool for web developers. Unlike raster images, SVGs are part of the DOM, which means you can interact with them just like any other HTML element. Here is how to use them effectively.

1. Using the <img> Tag

The simplest way is to treat an SVG like a regular image: <img src="logo.svg" alt="Logo">. This is great for static icons, but you won't be able to change the colors using CSS.

2. Inline SVG

You can paste the SVG code directly into your HTML. This gives you full control. You can use CSS classes to change the fill or stroke of specific parts of the graphic, making it perfect for interactive elements or hover effects.

3. CSS Background Image

You can also use SVGs in your CSS: background-image: url('pattern.svg');. This is ideal for decorative backgrounds and patterns that need to repeat across a page.

Best Practices

Always optimize your SVG files before using them on the web. Tools like SVGO can remove unnecessary metadata and minify the code, significantly reducing file size without affecting the visual quality.

Inline SVG Advantages

When you place SVG code directly in your HTML, you gain the ability to style it with CSS. You can change colors, add hover effects, animate paths, and apply filters all without additional JavaScript. This makes inline SVG the preferred method for icons and decorative elements that need to interact with the page design.

SVG as an Image Tag

The simplest way to use an SVG is as an image: <img src="icon.svg">. This approach treats the SVG like any other image file it's cached by the browser, easy to reference, and works across all browsers. The downside is that you cannot style the SVG internals with CSS when using this method.

CSS Background SVG

SVGs can also be used as CSS background images: background-image: url('pattern.svg'). This is particularly useful for decorative patterns and textures. You can combine this with background-size and background-repeat properties to create seamless tiled backgrounds from our background collection.

Responsive SVG Techniques

To make SVGs responsive, use viewBox attribute and set width to 100%. The viewBox defines the coordinate system, while the width/height attributes control the rendered size. This ensures your icons and logos scale properly across all device sizes without distortion.

Performance Best Practices

For optimal performance, minify your SVG code by removing unnecessary whitespace, comments, and default attributes. Tools like SVGO can automate this process. If you're using many SVG icons, consider creating a sprite sheet or using a font icon system. For large decorative SVGs, lazy loading helps keep initial page load times fast.

Accessibility Considerations

Always add role="img" and aria-label to inline SVGs for screen reader compatibility. Decorative SVGs that don't convey information should have aria-hidden="true". Title elements inside SVGs provide tooltips and additional context for assistive technologies.

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge) support SVG natively. Internet Explorer 11 has partial support with some limitations. For legacy browser compatibility, consider providing PNG fallbacks using the <picture> element with SVG as the primary source and PNG as the fallback.