Scalable Vector Graphics (SVG) is a family of specifications for 2D Scalable Vector Graphics. They are XML-based and can be static or dynamic (animated or interactive). This recipe shows you how to use a SVG image in your app, and apply a Gaussian filter when you click on it.
Copy the full code of this recipe from the code/11/svg
folder. The SVG image is available in the code/resources/images
folder. You can launch this code using the URL: http://localhost:8080/11/svg/main.html
.
The steps to be followed are:
Create
main.html
with a SVG element in its page content. Draw a SVG rectangle and display the SVG image within the rectangle:<div data-role='content'> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="gausfilter" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <rect width...