SVGs

The Secret Weapon for Crystal-Clear Graphics

SVGs, or Scalable Vector Graphics, are the hidden masters of web design imagery. Think of them as the alchemists of visuals: lightweight, flexible, and always ready to reshape themselves without losing an ounce of sharpness. Whether displayed on the tiniest smartphone or the grandest monitor, SVGs remain impeccably crisp, as if imbued with an eternal youth potion.

Since SVGs are XML-based, you can embed them directly into your HTML and enhance them with CSS for enchanting animations or styling. Whether it’s logos, icons, or interactive charts, SVGs are your go-to choice for dynamic designs that look perfect on every device.

Let’s Keep Going

Line
Rectangle

Circle
Converting Vector Graphics

SVGs in HTML

Vector graphics directly in the code – flexible, sharp, and scalable!

Line

The First Brushstroke of Your Design

The simplest spell in the book! With a <line> element, you can effortlessly draw a line. Think of it as the first stroke of a magical brush: clear, straight, and brimming with potential.

<svg width="200" height="200">
    <line x1="10" y1="10" x2="190" y2="190" stroke="purple" stroke-width="5">
</svg>

Rectangle

Structure and Order at a Glance

Rectangles are the bread and butter of the SVG world! With the <rect> element, you can conjure up square or rectangular shapes on your page. Perfect for adding a touch of structure and organization to your design.

<svg width="200" height="200">
    <rect x="10" y="10" width="180" height="100" fill="pink" stroke="purple" stroke-width="5">
</svg>

Circle

Round and Perfect, the Dancers of Shapes

Circles are the elegant dancers of the SVG world. With <circle>, you can draw perfect round forms—so simple, it feels like magic. Just define the center and radius, and voilà, there it is, gracefully taking the stage.

<svg width="200" height="200" class="circle">
    <circle cx="100" cy="100" r="50">
</svg>

Converting Vector Graphics

From Image to Magic – Transform Your Graphics into SVG

Do you have an image you want to turn into a sharp, scalable SVG graphic? No problem! Websites like convertio.co make it easy – just upload your image, and voilà, it’s transformed into an SVG. Graphic tools like Illustrator or Inkscape can also save directly as SVGs or provide the code. With this, any image becomes a magical graphic that shines perfectly on screens of all sizes!

<img src="assets/img/fox.svg" alt="" class="img">

In this lesson, you have learned…

How to draw a simple line using <line> by defining the start and end points, as well as color and thickness.
Why <rect> is ideal for creating rectangles and square shapes to bring structure and order to SVG designs.
How to create perfect circles with <circle> by specifying the center point (cx, cy) and the radius (r).
Why SVGs are vector-based, allowing them to scale without any loss of quality and remain razor-sharp on any screen size.
How to convert existing images into SVGs to use them as flexible, lightweight graphics for your website.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

Let’s Keep Going