Using the SVG feTurbulence Filter for Wave Effects
--
The front-end development space is nothing short of electrifying. It feels like every other week I find a tool, methodology or framework that intrigues me. With all of these “shiny things,” I tend to remind myself to always practice clever adoption methods.
This week, while working on an SVG animation demo, I discovered an interesting way to manipulate SVG elements using the SVG <filter> element. As a developer who specializes in interactive design and UX, this finding sparked a variety of ideas on animated transitions, hover effects and other ways to enhance the presentation of web applications.
Structuring a Basic SVG
Before I get into filters, I’d like to explain a bit about the structure of an SVG.
An SVG in its essence is an XML-based markup language for describing 2D graphics. MDN’s definition gives a good example by saying, “SVG is essential to graphics what HTML is to text”.
An extremely basic structure of an SVG document looks like this:
<svg xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 100 100">
<rect x=”10" y=”10" width=”80" height=”80" fill=”green” />
</svg>`The SVG starts with the <svg> tag, which can carry a few attributes. Similar to other HTML tags, attributes such as “width” and “height” can be added to the <svg> tag as well.
xmlns: Stands for XML Namespace. Since SVG is XML-based, it needs to declare it’s namespace to identify its elements as SVG elements. Note, if an SVG is inside HTML it does not need this attribute. The namespace is already provided in the HTML parser.
rect: This is the shape that is being rendered within the SVG. Check out MDN for more shapes.
viewBox: The viewBox attribute defines the dimensions and position of the SVG. You can think of the viewBox as a telescope lens. You’re looking through the viewBox to see the image inside. The attribute takes a few values:
//pans within viewbox
<min-x> <min-y>//zooms in or out of image within viewbox
<width> <height>
min-x and min-y: Moves or pans the viewBox within the scope of the SVG.
