For every [Subnautica: Below Zero update](https://unknownworlds.com/subnautica/subnautica-below-zero/), we create a micro-site to detail, in visual clarity, the additions to the game. The objective of each update is to show what we've added or improved upon with the latest Early Access update to the game. Information needs to be visual, clear, and expressive. So, in advance of building each micro-site, I sit down with the information and imagine the best possible way to express each addition. Throughout the years, I've grown the number of designs in my toolkit and with each site, I try to push my skills as web developer. For [this update](https://unknownworlds.com/subnautica/below-zero-salad-days-update/?k=11), I wanted to find a way to point out additions in a particular area of the game using one image. I didn't want to crop the same image over and over, but I also didn't want to simply describe what I needed the viewer to look at. What's a girl to do? Enter responsive SVGs. ![Image of Marguerit in her greenhouse with her pet snow stalker](https://dev-to-uploads.s3.amazonaws.com/i/fezkgurbt63a43ke7th6.jpg) I can feel it, you're asking "Why bother with SVGs when we can use PNGs to a similar effect?" Great question. Most importantly, I didn't want to affect the image. If a user wanted to save the image off the page, I wanted them to have a clean version. Second, PNGs are expensive resources on web-pages, especially on this scale (we would need an image that is 2x the intended size to get a clear picture on Retina displays). Third, SVGs are vector-based and thus scale perfectly. They are the most loss-less format for graphics in websites. Finally, if I wanted to, I could move the path end-points to match up with my textboxes in a responsive fashion. ## OK, What about the code? First things first, I knew I needed the image to be responsive inside of a parent element constrained only by a max-width property. When working with SVGs, you have to think of the containing element as a canvas within which to work. I needed a canvas that was always going to be the size of a responsive image: ```html

``` The important part here is only that we are containing an image inside of an SVG `viewBox` which describes the contained element space (our canvas). By making the parent div `position: relative;` and the child SVG `position: absolute;` we're asking the DOM to overlay our SVG canvas over the parent element `#greenhouse` with width instructions to fill 100% of _its_ parent. The other important part is the `preserveAspectRatio` attribute, which asks the DOM to calculate a specific ratio for the SVG element at any size. In this case, we've asked for uniform scaling with `xMinYMin` and we've asked to keep the view box smaller than the viewport with `meet`. You can also see that we've explicitly set the height and width of the `` to match the view box. This is important as it ensures they are responsive _together_. The next step is to draw the SVG elements we want within the same view box. ```html

``` I've chosen to use circles with no fill and a 3px stroke-width. Explaining how to draw SVGs is outside the scope of this post and there is a plethora of information available on the internet describing the various shapes. I used [Chris Coyer's The SVG Path Syntax: An Illustrated Guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/) to design the paths described later. Using the `` element, we describe the coordinates inside our view box using `cx` for the x-axis and `cy` for the y-axis. Because this circle element is inside the _same_ parent SVG, we are using the same view box for both the image and the circles. Voila, the circles scale perfectly with the image. If I wanted to, I could also place an anchor tag in exactly the same fashion to match my circles. ## But how do we draw the SVG outside the view box? I'm glad you asked. I wanted to include descriptive textboxes below the image that explained what was in each circle. So I needed a way to extend the SVG graphic outside this view box. Solution? Place another view box on top of this view box and give it a higher `z-index`. View boxes for everyone! ```html ``` So I've added a new SVG element and defined its view box as being double the height of the image view box. I won't utilize all this space but it's an easy aspect ratio to understand. Using the previously mentioned guide, I carefully drew paths from each circle and anchored them below the image and its SVG view box. And of course, we include the CSS `z-index` to ask this element to be on top. Finally, I added some descriptive boxes below. The whole thing looks like: ```html

Whip up a delicious salad

Cuddle up to Marguerit’s Snow Stalker companion

Learn how to farm new, unusual plants

``` And there you have it! Responsive SVG circles overlaid on an image, with some SVG paths extending beyond the image. Parting thoughts: - The color of the textboxes matched the path color perfectly. So, you couldn't see that the paths were actually _on top_ of the boxes. With some due-diligence, it would be best to calculate where the box meets the path and end the path exactly there. Since we're working with fixed ratio, this is simpler then it sounds. - I always recommend that the parent element (not pictured here) has a `max-width` property to prevent the wild things one might see on extra wide screens. - The circles could have been inside the same svg view box as the lines. It was simply a result of process that they are not in this example. - On mobile, you would also want to take this idea a step further and calculate the end points of the path to meet each textbox as it changes to a 100% width. For the sake of brevity, I'll leave that particular challenge to you, dear reader. Thanks for reading my first dev.to post!

damjess

Responsive SVG Image Overlays

Join Our Newsletter. No Spam, Only the good stuff.