Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML SVG

Posted in HTML Tutorial
Updated on Sep 12, 2024
By Mari Selvan
๐Ÿ‘๏ธ 20 - Views
โณ 4 mins
๐Ÿ’ฌ 1 Comment
HTML SVG

Photo Credit to CodeToFun

๐Ÿ™‹ Introduction

Scalable Vector Graphics (SVG) is an XML-based markup language used for describing two-dimensional vector graphics.

SVG is widely used for creating interactive graphics on the web, including charts, diagrams, and animations. Its scalability ensures that graphics remain sharp and clear at any size or resolution, making it ideal for responsive web design.

๐Ÿคท What Is SVG?

SVG is a vector image format that uses XML to describe shapes, lines, curves, and text. Unlike raster images, which are pixel-based and can lose quality when scaled, SVG images are resolution-independent and can be scaled to any size without loss of quality. This makes SVG ideal for high-resolution displays and responsive designs.

๐Ÿ’ป Basic SVG Syntax

An SVG image is defined within an <svg> element, which contains various graphic elements. Hereโ€™s the basic syntax:

HTML
Copied
Copy To Clipboard
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG elements go here -->
</svg>

๐Ÿ–ผ๏ธ Common SVG Elements

  • <svg>: The container element for SVG graphics.
  • <rect>: Draws rectangles.
  • <circle>: Draws circles.
  • <ellipse>: Draws ellipses.
  • <line>: Draws lines.
  • <polyline>: Draws a series of connected lines.
  • <polygon>: Draws a closed shape with multiple sides.
  • <path>: Draws complex shapes using a series of commands.

๐Ÿ› ๏ธ SVG Attributes

  • width and height: Define the dimensions of the SVG canvas.
  • x and y: Specify the position of elements.
  • fill: Sets the color inside shapes.
  • stroke: Defines the color and width of the outline of shapes.
  • stroke-width: Specifies the width of the stroke.

โœจ Styling SVG

SVG elements can be styled using CSS. You can apply styles directly within the SVG using the style attribute or through external stylesheets. Hereโ€™s an example of inline styling:

HTML
Copied
Copy To Clipboard
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"></svg>
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3"/>
</svg>

Alternatively, you can use external CSS:

HTML
Copied
Copy To Clipboard
<style>
  .my-circle {
    fill: green;
    stroke: red;
    stroke-width: 2;
  }
</style>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="my-circle"/>
</svg>

๐ŸŽฌ Animating SVG

SVG provides built-in support for animations using the <animate>, <animateTransform>, and <animateMotion> elements. Hereโ€™s an example of a simple animation:

HTML
Copied
Copy To Clipboard
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="cx" from="50" to="100" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

โ™ฟ Accessibility Considerations

To ensure that SVG content is accessible to all users, including those using screen readers, you should:

  • Use <title> and <desc> elements within the SVG to provide descriptive text.
  • Ensure that interactive elements are focusable and provide keyboard navigation.
HTML
Copied
Copy To Clipboard
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <title>Blue Circle</title>
  <desc>A circle with a blue fill and black outline.</desc>
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3"/>
</svg>

๐Ÿ† Best Practices

  • Optimize SVG Files: Remove unnecessary metadata and reduce file size for better performance.
  • Use SVG Sprites: Combine multiple SVG icons into a single file to reduce HTTP requests.
  • Ensure Responsiveness: Use viewBox and preserveAspectRatio attributes to make SVGs responsive.

๐Ÿ“ Example

Hereโ€™s a complete example of an SVG with various elements and styles:

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html>
<head>
  <title>SVG Example</title>
  <style>
    .rect-style {
      fill: lightblue;
      stroke: black;
      stroke-width: 2;
    }
    .circle-style {
      fill: red;
      stroke: black;
      stroke-width: 2;
    }
  </style>
</head>
<body>
  <h1>SVG Example</h1>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" class="rect-style"/>
    <circle cx="150" cy="50" r="40" class="circle-style"/>
    <path d="M10 150 Q 50 120, 90 150 T 170 150" fill="none" stroke="green" stroke-width="4"/>
  </svg>
</body>
</html>

๐ŸŽ‰ Conclusion

SVG is a versatile and powerful tool for creating scalable and interactive graphics on the web. By leveraging its features and best practices, you can create visually appealing and responsive graphics that enhance the user experience.

๐Ÿ‘จโ€๐Ÿ’ป Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
๐Ÿ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy