I’ve never worked with SVG files before and hope someone here has more experience and could help me unlock my brain.
I’d like to have a svg file on a website scale with its container (I included it there as a background-image) and at a certain breakpoint some parts of the graphic should be hidden. Furthermore there should bi a minimum width, so the graphic won’t get too tiny on mobile screens.
Here’s what I’ve achieved so far:
- I have exportet the graphic from Adobe Illustrator as a responsive svg
- then I have tried to declutter the file a little bit and separated the part that should be hidden at the breakpoint by adding an additional group-container (
- after that I added a media-query to the file and set the second group to ‘display: none’
The problem I have now: I really don’t know how I can set a minimum width for the pathgroup that is still visible. So when I decrease the size of the browser-windows the graphic just gets smaller and smaller.
How could I prevent this? And if there are multiple ways: what would be considered best practise?
Thanks in advance.