Responsive SVG | minimum width

Web Design
#1

Hi there :slight_smile:

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 (<g></g>)
  • 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.

Sarah

#2

Can you post code?

#3

Did you use min-width or max-width (or whatever) styles at media queries?

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

#4

Hi Sparrow and grfkdzgn :slight_smile:

Thanks for replying. I’m sorry i didn’t answer sooner.
I set up an example. Although here it seems to work by setting a min-width and a max-width.
So it’s possible that the problem is somewhere in my flexbox-layout and not inside the svg at all.

It think I need to experiment a little bit more. But just in case:

Here the link to the example:

And here the SVG-Code:

<?xml version="1.0" encoding="utf-8"?> 
    <svg version="1.1" id="examplegraphic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 352 65" xml:space="preserve">
    <defs>
      <style>
        #bigc {
    	fill: #C1272D;
    	stroke: #4D4D4D;
    }
        #smallc {
            fill: #FF931E;
    	stroke: #4D4D4D;
        }
        @media screen and (max-width: 300px) {
    	#smallc {
              display: none;
            }
    	#bigc {
    	   fill: blue;
    	}
        } 	
      </style>
    </defs>
    <g id="bigc">
    		<rect x="0" y="5" width="50" height="50"/>
    </g>
    <g id="smallc">
    		<circle cx="94" cy="33" r="11.5"/>
    		<circle cx="135" cy="33" r="11.5"/>      		
    		<circle cx="176" cy="33" r="11.5"/>
    		<circle cx="217" cy="33" r="11.5"/>
    		<circle cx="258" cy="33" r="11.5"/>
    		<circle cx="299" cy="33" r="11.5"/>
    		<circle cx="340" cy="33" r="11.5"/>
#5

Ok… so I experimented a little bit.

And the main problem, I have now, is: setting a minimum width directly inside the svg doesn’t work for me. And if I set a minimum width for the “wrapper” div (the div containing the svg as background), the div will stop shrinking, but it also will be pushed out of my layout.

I have a hard time explaining it, but what I’d actually like to achieve: the space where the second pathgroup (#smallc in the example) was should completely vanish without allocating any more space to it. This way the other pathgroup (#bigc) would have more space and wouldn’t shrink as much. And of course I’d like to stop the div containing the image from being pushed out of the layout.

#6

Tried to visualize the result I’d like to get:

svg-prob
svg-prob.png773×1101 22.9 KB