<svg> Tag

The <svg> tag is used to display SVG (Scalable Vector Graphics) files that maintain consistent quality regardless of screen size.

SVG is a valuable tool for representing graphic elements on the web without loss of quality and is widely used in various applications.

Key SVG Attributes:

1. viewBox: The viewBox attribute defines the visible area within the SVG canvas. This attribute consists of four values: (minimum x-coordinate, minimum y-coordinate, width, height). For example, viewBox="0 0 100 100" shows an area of 100x100 starting from the top left corner of the SVG.

2. preserveAspectRatio: This attribute defines how the viewBox is fitted into the SVG container.

3. fill & stroke: The fill attribute defines the interior color of a shape, while the stroke attribute defines the outline color of a shape.

4. fill-opacity & stroke-opacity: These attributes define the transparency of the fill and stroke, respectively. The values range from 0 (completely transparent) to 1 (completely opaque).

Key Features of SVG:

1. Vector-Based: SVG is based on vector graphics, which are defined using mathematical expressions of points and lines. Therefore, there is no loss of quality when scaling up or down.

2. DOM Manipulation: SVG elements can be manipulated directly within the DOM of a web page.

3. Styling and Scripting: SVG can be styled with CSS and can be animated and controlled with JavaScript.

4. Various Graphic Elements: SVG includes several basic graphic elements, such as circles (<circle>), rectangles (<rect>), lines (<line>), polylines (<polyline>), polygons (<polygon>) and paths (<path>).

Example Usage

<svg> Tag Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

SVG Example in Template

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="18"
  height="19"
  viewBox="0 0 18 19"
  fill="none"
>
  <path
    d="M9 0.72998C4.16914 0.72998 0.25 4.64912 0.25 9.47998C0.25 14.3108 4.16914 18.23 9 18.23C13.8309 18.23 17.75 14.3151 17.75 9.47998C17.75 4.64482 13.8309 0.72998 9 0.72998ZM14.5555 4.76318C15.5679 5.95335 16.1705 7.43769 16.2742 8.99678C14.6973 8.91475 12.8105 8.91475 11.2977 9.05615C11.1062 8.57295 10.9102 8.09912 10.6961 7.64326C12.4406 6.88701 13.7852 5.89326 14.5555 4.76318ZM9 2.18818C10.6996 2.18526 12.3463 2.77887 13.6531 3.86553C12.8602 4.86787 11.616 5.74053 10.0664 6.39912C9.21875 4.83154 8.24336 3.48271 7.20312 2.42061C7.79016 2.26906 8.39373 2.19099 9 2.18818ZM5.70039 2.98584C6.75313 4.03389 7.74219 5.36865 8.6082 6.93115C6.96289 7.43389 5.07617 7.72217 3.0625 7.72217C2.67969 7.72217 2.30625 7.7085 1.93711 7.68545C2.19388 6.67944 2.66241 5.73981 3.31139 4.92937C3.96037 4.11892 4.77484 3.45632 5.70039 2.98584ZM1.72187 9.1335C2.13672 9.15186 2.55586 9.16084 2.97969 9.15654C5.27656 9.1292 7.41406 8.76904 9.25078 8.17998C9.42396 8.54014 9.58802 8.90928 9.74297 9.2874C9.52104 9.33599 9.3031 9.40128 9.09101 9.48272C6.58008 10.5374 4.60234 12.237 3.53125 14.2925C2.35678 12.9645 1.70839 11.2528 1.7082 9.47998C1.7082 9.36279 1.71289 9.24756 1.72187 9.1335ZM9 16.7718C7.38 16.7737 5.80604 16.233 4.5293 15.2358C5.5 13.3128 7.23164 11.7202 9.41484 10.7331C9.61992 10.6374 9.89336 10.5601 10.2078 10.4917C10.4682 11.2115 10.7007 11.9589 10.9051 12.7339C11.2104 13.9036 11.4353 15.0928 11.5781 16.2933C10.7551 16.6086 9.88136 16.7708 9 16.7718ZM12.9422 15.6097C12.7996 14.3968 12.5726 13.1953 12.2629 12.014C12.1066 11.4214 11.9305 10.8472 11.7391 10.2866C13.1699 10.1694 14.8836 10.1862 16.2461 10.2866C16.126 11.3638 15.7671 12.4006 15.1956 13.3214C14.624 14.2423 13.8542 15.024 12.9422 15.6097Z"
    fill="#343E51"
    stroke="#343E51"
    stroke-width="0.0390625"
  />
</svg>

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.

Learn moreSign In