CODEWITHSUNDEEP
csssvgresponsive-designresponsive-images
David
David

Reputation: 512

CSS: scale background SVG in only one direction

I have a nice background SVG image from inkscape which marks the transition from one text section to the next. I want that background image to scale up or down to the full width of the text section. For reasons of responsivity, that size depends on the browser width. However, I want that background image to have a fixed height of 20px.

What does not work:

  1. background-size: cover; That does not work for me because it will cut the image off at the right instead of scaling it down, okay.
  2. background-size: contain That does not work for me because it will always scale the image down in x and y direction simultaneously. As a result, the image always retains its original x-y-ratio, okay.
  3. combining cover and contain That is not possible for syntactical reasons, okay.
  4. background-size: 100% 20px; or background-size: auto 20px That does not work, even though I would have expected it to. I tried it with a PNG and it worked. But with the SVG, the width is being adjusted correctly and the height is then also being adjusted so that the image does retain its original ration, which I do not want it to. However, I wish to use an SVG because it's a relatively simple image and I want it in the best resolution on all devices, including the really big screens, without using a huge PNG image.
  5. As the problem seems to be SVG-specific, I opened the SVG in a text editor and inserted into the tag the attribute and value preserveAspectRatio="none". As it did still not work I also tried removing the width and height and viewBox specifications in the SVG tag. No success.

Upvotes: 7

Views: 1799

Answers (2)

David
David

Reputation: 512

So I tried around and found a possibility:

  1. in Inkscape or in a text editor, set the following viewBox according to the size of your image – so if your image is 100*20px set it like this: viewBox="0 0 100 20"
  2. in a text editor, add preserveAspectRatio="none" to the SVG tag
  3. also, in the SVG tag set the height and width in percents: width="100%" height="100%"
  4. in the CSS markup, then simply use background-size: 100% 20px;

With these steps it is possible to scale the background SVG using CSS in the same way that one would scale any bitmap image.

Upvotes: 5

Marco Yammine
Marco Yammine

Reputation: 323

SVG vectors are rendered differently than static images. They are traced live on the browser. This is what makes them great for web use as they can scale in size without losing quality. Because of this css is unable to alter the rendering in a way that would distort it. If using svg is a strict requirement and assuming you expect dynamic widths then you could split it in multiple sections and have them distributed horizontally giving you the effect you are looking for if your width is static then just edit it on any online svg editor or Illustrator.

FYI this might be a duplicate question: How does one make a SVG background that stretches rather than tiles?

Upvotes: 1

Related Questions