How to Use SVG Images in Web Pages

SVG is an XML-based vector image format that is widely used to display a variety of graphics on the web. In contrast to raster image formats such as PNG or JPG, which are made up of a grid of pixels, SVG images are composed of geometric shapes and paths that can be resized without losing quality. As a result, they are particularly well-suited for use in responsive web design, as they can be easily scaled to fit different screen sizes and resolutions.

One of the key advantages of using SVG is that they can be easily manipulated with CSS and JavaScript. This capability enables developers to create complex graphics and animations that would be difficult or even impossible to achieve with raster images. Furthermore, SVG images are usually smaller in file size than their raster counterparts, which can help to improve page load times and reduce bandwidth usage.

Simple Use of SVG in HTML

There are a few different ways to use SVG images in web pages. The most common method is to include the SVG code directly in the HTML of the page. This can be done by embedding the SVG code directly into the HTML using the <svg> element:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Another option is to use the <img> element to include an SVG image, just like you would with a raster image. This can be useful if you need to support older browsers that do not support inline SVG:

<img src="image.svg" alt="image">

Using SVG with CSS

In addition to using SVG images in HTML, they can also be used as background images in CSS. This allows you to apply SVG images as a repeating pattern, or to use them as a responsive full-screen background:

body {
  background-image: url('image.svg');
}

One of the major benefits of using SVG is the ability to manipulate it with CSS. This allows you to style SVG images just like you would any other element on the page.

For example, you can use CSS to change the fill and stroke colors of an SVG image, or to add a drop shadow or other effects.

svg {
  fill: red;
  stroke: blue;
  filter: drop-shadow(8px 8px 10px rgba(0,0,0,0.5));
}

You can also use CSS to animate SVG images, using techniques like transitions and keyframes. This can be a powerful way to create complex graphics and animations that are responsive and smooth.

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

svg {
  animation: spin 2s linear infinite;
}

One thing to keep in mind when styling SVG images with CSS is that some properties, like width and height, can have unexpected results. This is because SVG images are vector-based, and are not constrained by a fixed width and height like raster images.

To size an SVG image, it is generally best to use the viewBox attribute and the preserveAspectRatio attribute, rather than setting the width and height properties directly.

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- SVG content -->
</svg>

Using SVG with JavaScript

In addition to styling SVG images with CSS, you can also use JavaScript to manipulate them in a variety of ways. This can be especially useful for creating interactive graphics and animations, or for integrating SVG images with other elements on the page.

One way to use JavaScript with SVG is to select the SVG elements using DOM methods, and then modify their attributes or styles using JavaScript.

const circle = document.querySelector('circle');
circle.setAttribute('r', 50);
circle.style.fill = 'red';

Another option is to use one of the many JavaScript libraries and frameworks that are available for working with SVG. Some popular options include Snap.svg, Raphaël, and D3.js. These libraries can provide a variety of tools and features for working with SVG images, including animation, data visualization, and more.

Generate SVG Icons with Axialis IconGenerator

Axialis IconGenerator lets you generate customized icons from a large database of professionally-designed vector images. Several themes in different styles are proposed in the application.

The procedure to create a SVG file from an icon is very simple and can be done in a few clicks:

1. Select the icon set in the list. Several themes in different styles are available.
2. Choose the icon you want to generate in the list. Optionally, you can add an overlay modifier and choose where to apply it.
3. Optionally colorize the icon and/or the overlay.
4. Click “Create Icons“. Choose where to generate the icon and select “SVG“. Click OK.
5. The icon is generated. Now you can explore the folder where it is located and open it using either a SVG editor or a text editor to apply it to your source code.

Conclusion

SVG is a powerful and versatile format for creating graphics and animations on the web. Its ability to scale without losing quality, combined with the ability to manipulate it with CSS and JavaScript, make it an excellent choice for a wide range of applications. Whether you are creating simple icons or complex graphics and animations, SVG is an important tool to have in your toolbox.