본문으로 건너뛰기

<svg> Tag

<svg> Tag

The <svg> tag represents SVG (Scalable Vector Graphic) files, which maintain constant image quality regardless of screen size.

SVG is a useful tool for displaying graphic elements on the web without degradation and is widely used in various applications.


Main Attributes of SVG:

  1. viewBox: The viewBox attribute defines the visible area within the SVG canvas. It consists of four values, which represent (minimum x-coordinate, minimum y-coordinate, width, height) respectively. 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 fits within the SVG container.

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

  4. fill-opacity & stroke-opacity: These attributes define the opacity 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, defining graphic elements in terms of points and lines. Therefore, it doesn't lose quality when scaled up or down.

  2. DOM Manipulation: SVG elements can be directly manipulated within the web page's DOM.

  3. Style and Scripts: SVG can be styled with CSS and animated or manipulated with JavaScript.

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


Examples of Use

<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 within a 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>