Article Categories

Selected Reading

How to create SVG graphics using JavaScript?

Javascript Object Oriented Programming Front End Technology

SVG (Scalable Vector Graphics) can be dynamically created and manipulated using JavaScript. This allows you to generate interactive graphics, charts, and animations programmatically.

Creating SVG Elements with JavaScript

To create SVG elements in JavaScript, use document.createElementNS() with the SVG namespace. Here's how to create a basic SVG container and add shapes:

<!DOCTYPE html>
<html>
<head>
    <title>SVG with JavaScript</title>
</head>
<body>
    <div id="container"></div>
    
    <script>
        // SVG namespace
        const svgNS = "http://www.w3.org/2000/svg";
        
        // Create SVG container
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("width", "300");
        svg.setAttribute("height", "200");
        svg.setAttribute("style", "border: 1px solid #ccc;");
        
        // Create a circle
        const circle = document.createElementNS(svgNS, "circle");
        circle.setAttributeNS(null, "cx", "80");
        circle.setAttributeNS(null, "cy", "80");
        circle.setAttributeNS(null, "r", "40");
        circle.setAttributeNS(null, "fill", "lightblue");
        circle.setAttributeNS(null, "stroke", "blue");
        circle.setAttributeNS(null, "stroke-width", "2");
        
        // Add circle to SVG
        svg.appendChild(circle);
        
        // Add SVG to page
        document.getElementById("container").appendChild(svg);
        
        console.log("SVG circle created successfully");
    </script>
</body>
</html>

SVG circle created successfully

Creating Multiple Shapes

You can create various SVG shapes like rectangles, lines, and paths:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple SVG Shapes</title>
</head>
<body>
    <div id="shapes-container"></div>
    
    <script>
        const svgNS = "http://www.w3.org/2000/svg";
        
        // Create SVG canvas
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("width", "400");
        svg.setAttribute("height", "300");
        svg.setAttribute("style", "border: 1px solid #333;");
        
        // Create rectangle
        const rect = document.createElementNS(svgNS, "rect");
        rect.setAttributeNS(null, "x", "50");
        rect.setAttributeNS(null, "y", "50");
        rect.setAttributeNS(null, "width", "100");
        rect.setAttributeNS(null, "height", "60");
        rect.setAttributeNS(null, "fill", "lightgreen");
        
        // Create line
        const line = document.createElementNS(svgNS, "line");
        line.setAttributeNS(null, "x1", "200");
        line.setAttributeNS(null, "y1", "50");
        line.setAttributeNS(null, "x2", "350");
        line.setAttributeNS(null, "y2", "120");
        line.setAttributeNS(null, "stroke", "red");
        line.setAttributeNS(null, "stroke-width", "3");
        
        // Create text
        const text = document.createElementNS(svgNS, "text");
        text.setAttributeNS(null, "x", "50");
        text.setAttributeNS(null, "y", "200");
        text.setAttributeNS(null, "font-family", "Arial");
        text.setAttributeNS(null, "font-size", "18");
        text.setAttributeNS(null, "fill", "purple");
        text.textContent = "SVG with JavaScript!";
        
        // Add all elements to SVG
        svg.appendChild(rect);
        svg.appendChild(line);
        svg.appendChild(text);
        
        // Add to page
        document.getElementById("shapes-container").appendChild(svg);
        
        console.log("Multiple SVG shapes created");
    </script>
</body>
</html>

Multiple SVG shapes created

Key Methods and Properties

Method/Property	Purpose	Example
`createElementNS()`	Create SVG element	`document.createElementNS(svgNS, "circle")`
`setAttributeNS()`	Set SVG attributes	`element.setAttributeNS(null, "r", "30")`
`appendChild()`	Add element to SVG	`svg.appendChild(circle)`

Common SVG Attributes

Essential attributes for different SVG shapes:

Circle: cx, cy (center), r (radius)
Rectangle: x, y (position), width, height
Line: x1, y1 (start), x2, y2 (end)
Styling: fill, stroke, stroke-width

Conclusion

JavaScript provides powerful methods to create SVG graphics dynamically using createElementNS() and setAttributeNS(). This approach enables interactive visualizations and programmatic graphics generation in web applications.

Govinda Sai

Updated on: 2026-03-15T23:18:59+05:30

729 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next