#svg

#svg

Security researcher Lyra Rebane has devised a novel clickjacking attack that relies on Scalable Vector Graphics (SVG) and Cascading Style Sheets (CSS). Rebane demonstrated the technique at BSides Tallinn in October and has now published a summary of her approach. The attack, which has yet to be fully mitigated, relies on the fact that SVG filters can leak information across origins, in violation of the web's same-origin policy.

Since I wrote that explanation, I've designed and implemented new Magnificent 7 animated graphics across my website. They play on the web design pioneer theme, featuring seven magnificent Old West characters. View this animated SVG on my website. (Large preview) <symbol> and <use> let me define a character design and reuse it across multiple SVGs and pages. First, I created my characters and put each into a <symbol> inside a hidden library SVG:

I was looking for a way to create images (think screenshots) of CSS layouts that I can use in HTML, EPUB and PDF files. This blog post describes my solution - which produces SVG images.

Creating motion can be tricky. Too much and it's distracting. Too little and a design feels flat. Ambient animations are the middle ground - subtle, slow-moving details that add atmosphere without stealing the show. Unlike timeline-based animations, which tell stories across a sequence of events, or interaction animations that are triggered when someone touches something, ambient animations are the kind of passive movements you might not notice at first. But, they make a design look alive in subtle ways.

Adding SMIL animations in SVG enhances design capabilities, going beyond what CSS animations can achieve and offering designers a semantic animation solution.