
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to create SVG graphics using JavaScript?
All modern browsers support SVG and you can easily create it using JavaScript. Google Chrome and Firefox both support SVG.
With JavaScript, create a blank SVG document object model (DOM). Using attributes, create a shape like a circle or a rectangle.
var mySvg = "http://www.w3.org/2000/svg"; var myDoc = evt.target.ownerDocument; var myShape = svgDocument.createElementNS(mySvg, "circle"); myShape.setAttributeNS(null, "cx", 40); myShape.setAttributeNS(null, "cy", 40); myShape.setAttributeNS(null, "r", 30); myShape.setAttributeNS(null, "fill", "yellow");
- Related Articles
- How to work with Scalable Vector Graphics (SVG) in HTML5?
- How to add Scalable Vector Graphics (SVG) to your Web Page?
- How to draw on scroll using JavaScript and SVG?
- How to Draw Graphics using Canvas in HTML5?
- How to import a SVG file in JavaScript?
- Turtle graphics using Python
- How to draw shapes using SVG in HTML5?
- How to create animations using JavaScript?
- How to Create Fullscreen API using JavaScript?
- How to create dynamic breadcrumbs using JavaScript?
- How to create editable div using JavaScript?
- Flood fill algorithm using C graphics
- How to draw grid using HTML5 and canvas or SVG?
- How to create a bold text using JavaScript?
- How to create a strikethrough text using JavaScript?

Advertisements