SVG Basics

Welcome back! In this post, we will introduce Scalable Vector Graphics (SVG), a powerful way to create and display vector images on the web.

What is SVG?

SVG is an XML-based format for describing vector graphics. Unlike raster images, SVG images can be scaled to any size without losing quality.

Creating an SVG

Here’s an example of a simple SVG graphic:

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

This code creates a red circle with a black border.

Embedding SVG in HTML

You can embed SVG directly in your HTML files or reference an external SVG file. Here’s an example of embedding SVG directly:

<div>
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100" style="fill:blue;" />
    </svg>
</div>

This code creates a blue square inside a <div>.

Styling SVG with CSS

You can style SVG elements using CSS. Here’s an example:

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

This code styles the circle in the SVG with CSS.

Conclusion

SVG is a versatile format for creating high-quality graphics that scale beautifully on any screen. Experiment with different shapes and styles to create unique designs. Stay tuned for more web development tips and tricks!