HTML5 SVG

SVG stands for Scalable Vector Graphics. It is used to create vector-based graphics directly in HTML.

SVG is useful for icons, diagrams, logos, charts, illustrations, and other graphics that need to remain sharp at different sizes.

1. How SVG Works

2. What is SVG?

SVG is an XML-based vector graphics format that can be embedded directly inside an HTML document.

Unlike a normal raster image, SVG graphics are based on shapes and coordinates. This allows them to scale without becoming blurry.

3. Basic SVG Example

An SVG drawing starts with the <svg> element.

<svg width="200" height="100">

    <circle
        cx="100"
        cy="50"
        r="35">
    </circle>

</svg>

Output

4. SVG Width and Height

The width and height attributes define the SVG drawing area's dimensions.

<svg width="400" height="200">

    ...

</svg>

You can change these values depending on the size of the graphic.

5. SVG Circle

The <circle> element creates a circle.

<svg width="200" height="120">

    <circle
        cx="100"
        cy="60"
        r="40">
    </circle>

</svg>

6. SVG Rectangle

The <rect> element creates a rectangle.

<svg width="250" height="120">

    <rect
        x="30"
        y="25"
        width="180"
        height="70">
    </rect>

</svg>

7. SVG Line

The <line> element draws a straight line between two points.

<svg width="250" height="120">

    <line
        x1="30"
        y1="30"
        x2="210"
        y2="90">
    </line>

</svg>

8. SVG Polygon

The <polygon> element can create a shape using multiple connected points.

<svg width="250" height="150">

    <polygon
        points="125,20 210,120 40,120">
    </polygon>

</svg>

9. SVG Text

SVG can also display text using the <text> element.

<svg width="300" height="100">

    <text x="40" y="60">
        Hello SVG
    </text>

</svg>

10. SVG Styling

SVG elements can have properties such as fill, stroke, and stroke-width.

<svg width="200" height="120">

    <circle
        cx="100"
        cy="60"
        r="40"
        fill="none"
        stroke="black"
        stroke-width="3">
    </circle>

</svg>

11. SVG Coordinate System

SVG uses an X and Y coordinate system. The origin is normally at the top-left of the SVG viewport.

12. SVG vs Canvas

SVG and Canvas can both create graphics, but their approach is different.

13. Where SVG is Commonly Used

• Logos
• Icons
• Charts
• Diagrams
• Maps
• Illustrations
• Scalable interface graphics

14. SVG and Responsive Design

SVG graphics can scale well when they are designed appropriately. This makes SVG useful for responsive interfaces where the same graphic may appear at different sizes.

The viewBox attribute is especially useful for controlling the coordinate system and scaling behavior of an SVG.

<svg
    viewBox="0 0 200 100"
    width="100%">

    ...

</svg>

15. SVG as an Image File

SVG graphics can also exist as separate .svg files and can be used through an image element.

<img
    src="logo.svg"
    alt="Company Logo">

16. Inline SVG

SVG can also be written directly inside an HTML document. This is called inline SVG.

<svg width="200"
     height="100"
     viewBox="0 0 200 100">

    <circle
        cx="100"
        cy="50"
        r="30">
    </circle>

</svg>

17. SVG Accessibility

When an SVG communicates important information, its accessibility should be considered. Images and graphical content should have suitable text alternatives or supporting text when required.

For decorative graphics, the implementation should ensure that they do not create unnecessary noise for assistive technologies.

18. Common Mistakes

Mistake 1: Confusing SVG with Canvas

SVG represents graphics using elements and shapes, while Canvas provides a drawing surface controlled through scripting.

Mistake 2: Forgetting viewBox

For responsive SVG graphics, a properly designed viewBox is often important for scaling.

Mistake 3: Using SVG for every graphic

SVG is excellent for many vector graphics, but Canvas or regular image formats may be more appropriate depending on the requirement.

19. Best Practices

• Use SVG for graphics that benefit from vector scaling.
• Use meaningful dimensions and coordinates.
• Use viewBox for flexible SVG layouts.
• Keep important graphics accessible.
• Choose SVG or Canvas based on the application's needs.

20. Practice Example

Create an SVG containing a rectangle, circle, line, and text.

<svg
    width="500"
    height="250"
    viewBox="0 0 500 250">

    <rect
        x="30"
        y="30"
        width="120"
        height="70"
        fill="none"
        stroke="black">
    </rect>

    <circle
        cx="250"
        cy="65"
        r="35"
        fill="none"
        stroke="black">
    </circle>

    <line
        x1="330"
        y1="30"
        x2="450"
        y2="100"
        stroke="black">
    </line>

    <text
        x="170"
        y="180">
        SVG Graphics
    </text>

</svg>