DEV Community

Cover image for Responsive SVG Image Overlays

Responsive SVG Image Overlays

Jess Damerst on June 27, 2020

For every Subnautica: Below Zero update, we create a micro-site to detail, in visual clarity, the additions to the game. The objective of each upda...
Collapse
 
hangindev profile image
Jason Leung 🧗‍♂️👨‍💻

Interesting use case of SVG. Thanks!

Collapse
 
damjess profile image
Jess Damerst

Thanks Jason!!

Collapse
 
hugh_jeremy profile image
Hugh Jeremy

Great example of a succinct, creative solution to a problem, without resorting to some bloated library. Good stuff! 👍

Collapse
 
damjess profile image
Jess Damerst

Thank you so much Hugh!

Collapse
 
roka profile image
Robert Katzki

Congrats on your first article! 🥳 Written nicely!
I would’ve loved to see a screenshot of how it looks like though.

Collapse
 
damjess profile image
Jess Damerst

Good idea, I'll add one :D

Collapse
 
simbiosis profile image
SIMBIOSIS

The screenshot is at the article's heading.

Collapse
 
simbiosis profile image
SIMBIOSIS • Edited

Amazing! I'm just a huge fan of svg and try to use it everywhwre I allowed to. This is a great teaching and use case to add to my personal knowledge. Thank you very much. If someday you may want to interchange this kid of stuff just contact me.
Well, I was really exited about it and could not avoid palying with it a little bit.
I added an overlay and a clip path to highlight the important areas within the circles. It looks like this:
My file

Collapse
 
bernardbaker profile image
Bernard Baker

I love SVG. And I love this article too 🤸.

Collapse
 
reedids profile image
청설모

SVG 🥰

Collapse
 
tomhermans profile image
tom hermans

Nice idea ! Well explained. Probably will use this technique in some form or another !