By admin | July 20, 2016 | No Comments
The HTML5 canvas element is used everywhere. From WebGL games to some amazing browser experiments, web developers are jumping on the canvas bandwagon and enjoying the ride.
But are we always using the right tool for the job? In many cases, Scalable Vector Graphics (SVG) offer a better alternative but itâ€™s easy to forget about the technology when itâ€™s hidden beneath the wave of canvas hype. If youâ€™re not considering SVG, perhaps the following reasons will make you think againâ€¦
1. SVGs are Scalable:
That should be obvious, but itâ€™s a huge benefit â€” especially now people are using high-resolution iPads and monitors. Itâ€™s also a bonus for responsive designs and your logo or chart can scale accordingly.
2. Designer Tools:
But anyone can create an SVG. Many of the tools are free and offer custom animation facilities. Have a play with:
OpenOffice or LibreOffice Draw
svg-edit â€” an online tool
3. Language/Framework Support:
4. Browser Support:
SVG and canvas elements are supported by all the HTML5 browsers. Neither have native support in IE8 and below, but shims such as RaphaÃ«l are available.
While thatâ€™s not necessarily a case for choosing SVG over canvas, you certainly canâ€™t reject SVGs on the basis of browser support.
5. Accessibility and SEO:
SVGs are accessible: text remains text, and something should appear even when your browser doesnâ€™t support every element.
Humans and machines can understand SVG code even if they canâ€™t render it. Search engines such as Google already parse SVGs but canvas elements will always require a fallback.
6. DOM Handling:
SVGs have a DOM so itâ€™s easy to attach event handlers and manipulate elements like you would for other HTML block. To move an item you simply change its co-ordinates.
The same is not true for canvas. To determine whether your mouse cursor is over an object, you need to compare the two locations and react accordingly â€” perhaps re-drawing the whole of the canvas again.
7. Itâ€™s More of What You Know:
Canvas manipulation isnâ€™t difficult but it requires a different mindset and youâ€™ll need to learn the API.
â€¦and the Future Looks Bright for SVG
The technology may have been around for more than a decade, but SVG developments continue to advance. Browser vendors are adding support for CSS backgrounds and inline integration as well as implementing mobile engines, animations, transforms and filters.
Canvas is also evolving but it remains a self-contained programmable bit-mapped image element. That will always impose limitations.
SVGs certainly arenâ€™t necessarily the best solution in all situations. If youâ€™re animating hundreds of items â€” perhaps for a firework or explosion effect â€” canvas will always be quicker because itâ€™s not constrained by the number of DOM elements the browser can handle. Canvas will generally be the best choice for fast action games.
However, SVGs remain a better alternative for logos or charts with fewer intensive effects. Theyâ€™re not as trendy as canvas but thatâ€™s no reason to avoid them.
Source :Â https://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/