Responsive SVG | minimum width

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

Can you post code?

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

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

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"/>

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.

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

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook