butiran

graphics in html

· 3 mins read · edit

This note is written as I want to use SVG for a JS-tutorial 26a43 , whose previous graphics are created using canvas. I have once created some SVG images but they are not well-documented. This note is for recalling previous experience about SVG and further learning about SVG.

svg

SVG (Scalable Vector Graphics) is great for logos and icons since it is an XML-based vector image format, while for dynamics animations and games, that requires real-time rendering, canvas is still preferable 1. Some advantages of SVG are flexibility, performance, and interactivity to modern web design in building highly engaging user interfaces and visual elements with clean, maintainable code when combining with CSS and JS 2 and the also how it is searchable and indexable for SEO 3. There are also drawbacks of SVG with JS to be aware of, e.g. JS engine parsing and compilation time 4 and information leaking via XSS 5.

There are some libraries available for creating image using canvas or SVG 6 and also tutorials, from basics 7, using some libraries like Pablo 8, SVGator 9, SVG.js 10, until how to create SVG viewer in HTML, CSS, and JS 11, and the demo for editing SVG path element online 12.

paths

Paths drawing in HTML can be achieved using canvas or svg element, so far I know if you want only use Vanilla JS 13, which is a fast, lightweight, cross-platform framework for builing incredible, powerful JS applications 14.

The concepts are similar, but the implementations for drawing paths using canvas element 15 and svg element 16 are not.

examples

refs

  1. Kashyap Joshi, “Difference between SVG and HTML 5 Canvas”, GeeksforGeeks, 12 Jul 2025, url https://www.geeksforgeeks.org/html/difference-between-svg-and-html-5-canvas/ [20260116]. ↩︎

  2. Asher Baum, “How to Create SVG-Based Animations with CSS and JavaScript for Interactive Graphics”, Dev Community, 7 May 2025, url https://dev.to/hexshift/how-to-create-svg-based-animations-with-css-and-javascript-for-interactive-graphics-4bp3 [20250116]. ↩︎

  3. James Williams, “SVG versus Canvas: Choosing the right technology for your web application”, JointJS, 23 Aug 2025, url https://www.jointjs.com/blog/svg-versus-canvas [20260116]. ↩︎

  4. Jacob Kurt Groß, “Breaking Up with SVG-in-JS in 2023”, Text, 30 Jun 2023, url https://kurtextrem.de/posts/svg-in-js [20260116]. ↩︎

  5. David Walsh, “JavaScript in SVGs”, DWB, 30 Jun 2020, url https://davidwalsh.name/javascript-in-svgs [20260116]. ↩︎

  6. Gabriel Delight, “SVG Vs. Canvas: A Comparison”, Open Replay, 28 Apr 2023, url https://blog.openreplay.com/svg-vs-canvas--a-comparison/ [20260116]. ↩︎

  7. Josh Comeau, “A Friendly Introduction to SVG”, Johswcomeau, 25 Jul 2025, url https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/ [20260116] ↩︎

  8. David Omotayo, “Building SVGs in JavaScript with Pablo”, LogRocket, 4 Jan 2022, url https://blog.logrocket.com/building-svgs-javascript-pablo/ [20260116]. ↩︎

  9. Erika Dosa, “How to Create Mobile App Animations With SVGator”, Envato Tuts+, 30 Sep 2021, url https://code.tutsplus.com/how-to-create-mobile-app-animations-with-svgator--cms-38361t [20260116]. ↩︎

  10. Wout Fierents, et al., “SVG.js”, SVG.js, 15 Sep 2025, url https://svgjs.dev/docs/3.2/ [20260116]. ↩︎

  11. Esther Vaati, “”, Envato Tuts+, 21 Jul 2025, url https://webdesign.tutsplus.com/svg-viewer--cms-109195t [20260116]. ↩︎

  12. Yann Armelin, “svg-path-editor”, GitHub, 2 Nov 2025, url https://yqnn.github.io/svg-path-editor/ [20260116]. ↩︎

  13. -, “Vanilla JS”, url http://vanilla-js.com [20260117]. ↩︎

  14. Victoria Karneichyk, “Vanilla JS vs JavaScript vs Frameworks, and When to Use Them”, Webix, 6 Sep 2024, url https://blog.webix.com/vanillajs-vs-framework-when-using-js-libraries/ [20260117]. ↩︎

  15. Jan Bodnar, “JavaScript Canvas moveTo Tutorial”, ZetCode, 3 Apr 2025, url https://zetcode.com/canvas-api/moveto/ [20260117]. ↩︎

  16. Josh Comeau, “An Interactive Guide to SVG Paths, Johswcomeau, 18 Aug 2025, url https://www.joshwcomeau.com/svg/interactive-guide-to-paths/ [20260117]. ↩︎