0

I have an existing project, and for drawing images it is based on HTML canvas. Now I want to "migrate" in svg, but I don't know how. With canvas I can draw an image simply with

context.drawImage(img)

where context is an istance of CanvasRenderingContext2D. Is there some sort of context also for SVG?

EDIT

I don't want to draw an SVG image into canvas but I want to replace the canvas with an SVG element. The reason behind this choice is to improve the quality of images. Drawing a .svg picture on canvas element, it is rendered as a .png or .jpg. Drawing a .svg picture on SVG element, it retains the format, and the result is higher quality.

Fabrizio Morello
  • 335
  • 1
  • 5
  • 18
  • 1
    There is an `` tag to include other resources. The source may also be a data url. – Sirko Mar 02 '15 at 12:56
  • In my case I have not default images, they are created and put on canvas at runtime. Is there a class for this tag ``? – Fabrizio Morello Mar 02 '15 at 12:59
  • You can copy canvas img data to an img tag (http://stackoverflow.com/questions/18008473/convert-html5-canvas-to-img-element) – dwana Mar 02 '15 at 13:03
  • If the sources are canvas elements, you can either include the canvas directly using `` or convert to data url and use ``. What to you mean by "class for ``" ? SVG is created more like HTML using tags than canvas using an API. – Sirko Mar 02 '15 at 13:03
  • My code work in this way : 1) I create an HTML Image object (let's say `img`) 2) I set the source with an URL (`img.src = "./path"`) and after that 3) I call `context.drawImage(img)`. My question is : what is the equivalent way to do this with an SVG element? I mean, if a repeat the first two steps, how can I continue? I think is not possible to do the same with SVG – Fabrizio Morello Mar 02 '15 at 14:00
  • The same i.e. 1) Create an SVG image object (an image rather than an img). 2 set the source (in this case it's xlink:href) 3) call context.drawImage(image). You do need an image though you can't do it with arbitrary inline SVG. – Robert Longson Mar 02 '15 at 22:47
  • If you were able to do what you desire it would be a privacy hole in the browser. You should report it and we'll "fix" it so you can't do it any more. – Robert Longson Mar 03 '15 at 09:48

0 Answers0