Saturday, November 12, 2016

Live editing of SVGs using JS - problem analysis


How to make dynamic SVGs which can be controlled from JS? For example, we would like to change foreground text, or background image on a SVG. How to do it?

Available tools:
JavaScript (JS), CSS3, PHP and HTML5

Methods used for solving this problem:

*Prerequisite: Inline SVG*

In order for SVGs to become parsable and editable by JS, we need to load it as an inline SVG. A simple src tag to a SVG image will display the image, but it won't allow us to edit it's parts using JS and CSS.

Method #1
Direct access to parsed HTML elements and modification of their properties and content, same as in case of any other HTML document.

Method #2
Using HTML5 Canvas, convert inline svg to a canvas drawing, and further exporting it to a PNG image. Here's an example how to do this:

No comments:

Post a Comment

Ubuntu 12.04, 14.04, 16.04 - auto start an app or script before login

To run a command or application at startup, even before the user has logged in, you can use this file: /etc/rc.local The commands entered...