DEV Community

Gustavo Assis
Gustavo Assis

Posted on • Edited on

SVG IN HTML.

#webdev #programming #beginners

Image formats like PNG and JPG are classified as raster formats. These formats are made of a matrix of pixels. The problem with these images is that they don't upscale well — in other words, if you make the image larger, its definition will decrease.

An SVG is a different kind of image. It is a Scalable Vector Graphic (SVG) and it uses equations to plot the image. In that way, the definition of the image won't change when we change its scale.

We can use SVG images in HTML with the tag . Example:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
  <circle cx="35" cy="40" r="7" fill="black" />
  <circle cx="65" cy="40" r="7" fill="black" />
  <path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>
Enter fullscreen mode Exit fullscreen mode

This example was taken from the freeCodeCamp website. This code draws a smiling face:

Now that we know what an SVG is, let's see how we can use it. First, the basic structure is:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Here we make the image -->
</svg>
Enter fullscreen mode Exit fullscreen mode

Let's see what means each element:

xmlns – Specifies the namespace (It's required).

width / height – Defines the display size of the image.

viewBox – Defines the internal coordinate system of the image (minX minY width height).

<!--We can have too:>
preserveAspectRatio – Defines the proportion of the SVG when it scales.
Enter fullscreen mode Exit fullscreen mode

Now, to make the image we have:

Line:
<line x1="10" y1="10" x2="100" y2="100"/>

Rectangle:
<rect x="10" y="10" width="100" height="50"/>

Circle:
<circle cx="50" cy="50" r="40"/>

Ellipse:
<ellipse cx="100" cy="50" rx="50" ry="25"/>

Polygon:
<polygon points="50,5 100,100 0,100" fill="orange"/>

Polyline:
<polyline points="0,40 40,40 40,80 80,80"/>

Path:
<path d="M10 80 C 40 10, 65 10, 95 80"/>
Enter fullscreen mode Exit fullscreen mode

The common Attributes for Shapes are:

fill – Sets the fill color of the shape.

stroke – Sets the outline (border) color of the shape.

stroke-width – Defines the outline thickness.

opacity – Controls the transparency of the entire shape (0.0 to 1.0).

fill-opacity – Controls transparency only for the fill.

stroke-opacity – Controls transparency only for the outline.
Enter fullscreen mode Exit fullscreen mode

To plot some text:

x / y – Starting position of the text.

font-family – Font type.

font-size – Text size.

fill – Text color.

text-anchor – Aligns the text (start, middle, end).

Example:
<text x="10" y="50" font-family="Verdana" font-size="20" fill="black">
  Hello SVG!
</text>
Enter fullscreen mode Exit fullscreen mode

We can add an attribute to a group of images with the tag <g>:

<g fill="blue" stroke="black">
  <circle cx="40" cy="40" r="30"/>
  <rect x="80" y="20" width="50" height="50"/>
</g>
Enter fullscreen mode Exit fullscreen mode

And we can do tranformation too:

translate(x, y) – Moves the element.

rotate(angle, cx, cy) – Rotates the element around a point.

scale(sx, sy) – Resizes the element.

skewX(angle) / skewY(angle) – Skews the element horizontally or vertically.

Example:
<rect x="10" y="10" width="50" height="50" transform="rotate(45 35 35)"/>
Enter fullscreen mode Exit fullscreen mode

My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX

Top comments (0)