1

There's lots of stuff out there comparing the HTML elements SVG and Canvas, but I'm still a little confused.

I'm looking for a way to draw an arbitrary shape (like, I have a description of a shape, in coordinates, or in lines and circles, etc.). I want to be able to generate the shape with Javascript (taking inputs from the user, e.g. measurements) and draw the shape I calculated onto an area of the web page.

I currently do this with a <canvas>, by using .moveTo and .lineTo. It gives me the shape I want, but I would love to have the benefits of Scalable Vector Graphics, where it doesn't lose quality when re-sized, and the individual pieces of the shape are more accessible (rather than just being pixels in the canvas, they are each an object I can interact with: modify, register listeners on, etc.)

Is SVG something I can easily manipulate in Javascript, the way one can in a HTML5 Canvas?

tscizzle
  • 313
  • 2
  • 10
  • 4
    to use SVG, you add (various SVG) elements to the (document) DOM. Those can include [path](https://www.w3.org/TR/SVG/paths.html) elements whose content works like moveTo and lineTo. You can embed svg within html and vice versa. So, yes, you can do that using Javascript, just like you can dynamically add a (regular html) `div` to the DOM. – Erik Eidt May 07 '17 at 16:48
  • 1
    Google for "javascript svg lib", find, for example, this [link to the "how to start" page from svgjs](http://svgjs.com/getting-started/) and follow the instructions. – Doc Brown May 08 '17 at 10:09
  • well, you can always define an imaginary system of coordinated inside your canvas and redraw the shapes when you zoom in or out and that will simulate how svg works, but why not simply use `` instead ? it's part of the dom and easily manipulated by javascript. there's the d3 framework that does just that – svarog May 30 '17 at 17:45
  • did you tried to use d3js ? it is a pretty nice library to use SVG. you can also use canvas to draw d3js elements – Buenjy Jul 13 '17 at 21:03

0 Answers0