Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw an SVG file on an HTML5 canvas?
To draw an SVG file on an HTML5 canvas, you need to convert the SVG into an image format that the canvas can render. The canvas element cannot directly draw SVG markup, but it can draw Image objects. This process involves creating an SVG string, converting it to a Blob, generating an object URL, and then drawing it using the drawImage() method.
Syntax
Following is the basic syntax for drawing SVG on canvas −
var svgString = '<svg xmlns="http://www.w3.org/2000/svg">...</svg>';
var blob = new Blob([svgString], {type: 'image/svg+xml'});
var url = URL.createObjectURL(blob);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, x, y);
URL.revokeObjectURL(url);
};
img.src = url;
How It Works
The process involves several key steps −
Create SVG String − Define your SVG markup as a string, including proper XML namespace declarations.
Create Blob − Convert the SVG string into a Blob object with MIME type
image/svg+xml.Generate Object URL − Use
URL.createObjectURL()to create a temporary URL for the Blob.Load as Image − Create a new Image object and set its source to the object URL.
Draw on Canvas − Once the image loads, use
drawImage()to render it on the canvas.Clean Up − Revoke the object URL to free memory.
Using SVG with foreignObject
The <foreignObject> element allows you to embed HTML content within SVG. This is particularly useful for creating complex layouts or text formatting that would be difficult to achieve with pure SVG elements.
Example
Following example demonstrates drawing SVG with HTML content onto a canvas −
<!DOCTYPE html>
<html>
<head>
<title>SVG with foreignObject on Canvas</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<canvas id="myCanvas" style="border:2px solid green;" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="350" height="150">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: Arial; font-size: 24px; padding: 20px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; text-align: center;">' +
'Welcome to <br>' +
'<span style="font-weight: bold; font-size: 32px;">TutorialsPoint</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var blob = new Blob([svgData], {type: 'image/svg+xml'});
var url = URL.createObjectURL(blob);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 25, 25);
URL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>
The output displays styled HTML content rendered through SVG onto the canvas −
Canvas with gradient background displaying: Welcome to TutorialsPoint (with styling applied inside a bordered canvas)
Drawing Pure SVG Graphics
You can also draw pure SVG graphics without HTML content using standard SVG elements like circles, rectangles, and paths.
Example
Following example shows drawing geometric SVG shapes on canvas −
<!DOCTYPE html>
<html>
<head>
<title>Pure SVG Graphics on Canvas</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<canvas id="svgCanvas" style="border:1px solid #ccc;" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById('svgCanvas');
var ctx = canvas.getContext('2d');
var svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" width="250" height="150">' +
'<rect x="20" y="20" width="80" height="60" fill="#3498db" stroke="#2980b9" stroke-width="2"/>' +
'<circle cx="160" cy="50" r="30" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>' +
'<polygon points="50,100 80,130 20,130" fill="#f39c12" stroke="#d68910" stroke-width="2"/>' +
'<text x="150" y="120" font-family="Arial" font-size="16" fill="#2c3e50">SVG Shapes</text>' +
'</svg>';
var blob = new Blob([svgMarkup], {type: 'image/svg+xml'});
var url = URL.createObjectURL(blob);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 25, 25);
URL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>
The output shows various SVG shapes (rectangle, circle, triangle) rendered on the canvas with colors and strokes −
Canvas displaying: - Blue rectangle - Red circle - Orange triangle - "SVG Shapes" text (all positioned within the canvas boundaries)
Loading External SVG Files
You can also load external SVG files and draw them on canvas using the fetch API or XMLHttpRequest to retrieve the SVG content.
Example
Following example demonstrates loading and rendering an external SVG file −
<!DOCTYPE html>
<html>
<head>
<title>External SVG File on Canvas</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<canvas id="externalCanvas" style="border:2px solid #333;" width="300" height="200"></canvas>
<button onclick="drawExternalSVG()">Load SVG</button>
<script>
function drawExternalSVG() {
var canvas = document.getElementById('externalCanvas');
var ctx = canvas.getContext('2d');
// Create a sample SVG string (simulating external file content)
var svgContent = '<svg xmlns="http://www.w3.org/2000/svg" width="250" height="150">' +
'<defs>' +
'<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">' +
'<stop offset="0%" style="stop-color:#ff7675;stop-opacity:1" />' +
'<stop offset="100%" style="stop-color:#74b9ff;stop-opacity:1" />' +
'</linearGradient>' +
'</defs>' +
'<rect x="25" y="25" width="200" height="100" fill="url(#grad1)" rx="10"/>' +
'<text x="125" y="80" text-anchor="middle" font-family="Arial" font-size="18" fill="white">External SVG</text>' +
'</svg>';
var blob = new Blob([svgContent], {type: 'image/svg+xml'});
var url = URL.createObjectURL(blob);
var img = new Image();
img.onload = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 25, 25);
URL.revokeObjectURL(url);
};
img.src = url;
}
</script>
</body>
</html>
Clicking the "Load SVG" button renders a gradient-filled rectangle with text onto the canvas.
Browser Compatibility
This technique works in all modern browsers that support HTML5 canvas and SVG. The key requirements are −
Canvas support − Available in all modern browsers
Blob constructor − Supported in IE 10+, Chrome, Firefox, Safari
URL.createObjectURL() − Widely supported across browsers
SVG as image source − Supported in modern browsers
Key Points
Always include the XML namespace
xmlns="http://www.w3.org/2000/svg"in your SVG markup.For HTML content in SVG, use
foreignObjectwith the HTML namespacexmlns="http://www.w3.org/1999/xhtml".
14K+ Views
