My Svg Image Ignores Its Stylesheet When Used as Background Image

My SVG image ignores its stylesheet when used as background image

That's how SVG works when used as an image. The data must be complete in a single file in order to protect user's privacy.

The mental model you need is that it's going to work and act in a similar way to a raster image, they are single files too.

You can still use a <link> tag but you'd have to encode the data as a data URI within the svg file itself.

SVG as background image not appearing

When you add svg code in url please not break it otherwise it was not working.

header {

  margin: 1rem auto 0 auto;

  border: 1px solid red;

}

.container {

  border: 2px dotted orange;

}

.container svg {

  border: 1px dashed blue;

  width: 100%;

  height: 100%;

}

#inline-svg {

  border: 2px dashed pink;

}

#header1 {}

#header2 {

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='background-svg' width='400px' height='200px' viewBox='0 0 400px 200px'><ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> </svg>");

  background-size: auto auto;

}

#background-svg {

  border: 3px solid black;

}

<header id="header1" class="masthead">

  <div id="1st-container" class="container">

    <svg xmlns='http://www.w3.org/2000/svg' id='inline-svg' width='200px' height='100px' viewBox='0 0 200px 200px'>

      <ellipse cx='200' cy='100' rx='200' ry='100' fill='green' />

    </svg>

  </div>

</header>

<header id="header2" class="masthead">

  <div id="2nd-container" class="container">

    hello

  </div>

</header>

svg as background wont show

If you want to use an SVG file as an image of any kind (including as a background image) then it must be a single file for privacy reasons. Any external references to anything including external CSS or images will be ignored.

In your case your SVG file includes an external image file, you need to convert that image to a data URI so that all of the image data is in the SVG file itself.

SVG background image scaling issue

Do not add width and height to the SVG Element, or background-size:cover in CSS. The SVG way of positioning and sizing works via attribute preserveAspectRatio:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 347 385" preserveAspectRatio="xMaxYMax slice">

It will make sure the viewBox covers the whole element background and is positioned so that the top right corners coincide.

(The rest of the attributes that were set on the svg element are not evaluated.)

SVG Background image not stretching horizontally cross-browsers

In my FF browser, it works if you change background-size: 100% to background-size: 100% 100%. This property takes two arguments, width and height, and sets height to auto if not provided. I guess that, depending on the version, you may need to set -moz-background-size.

How to prevent SVG background image from scaling?

Add a background-size; setting to that CSS rule, for example background-size:auto; or background-size: 100px 60px; or whatever you wish.

svg background image position is always centered in internet explorer, despite background-position: left center;

The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box’s background (as expected). How your SVG scale then becomes the controlling factor:

Set a viewBox="0 0 width height" (in pixels) attribute on your <svg> element and remove its width and height attributes. You also need to set preserveAspectRatio="xMinYMid" (x/vertically left-aligned, y/horizontally middle-aligned) on the svg element. This works with Internet Explorer 10 and 11, at least.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

Learn more about the preserveAspectRatio and viewBox attributes. Source, “Getting started with SVG” in the IEblog.

Cannot stretch svg background image, aspect ratio will be preserved

You should add

<svg preserveAspectRatio="none">

to your SVG.

MDN Reference Link

<none>

Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.

Custom font not displaying in SVG pattern used as background-image

You are using SVG in an image context. I.e. either via the html <img> tag, the SVG <image> tag or in your case as a background image.

In Firefox (and likely in other UAs at some point) images must consist of a single file only. Any data external to the image file (pattern-google.svg) is ignored. If you display the SVG directly then external data is loaded/used.

So what can you do...

Load the data as a data URI. I.e. base64 encode http://fonts.googleapis.com/css?family=Indie+Flower but read the final paragraph before you do this and then stick that data directly in the svg file itself.

So the import would look like this...

@import url('data:text/css;base64,whatever the base 64 encoded data looks like...')

Do be careful though because http://fonts.googleapis.com/css?family=Indie+Flower itself has external data so that data itself must itself be encoded as a data URI. I.e. you must go all the way down the rabbit hole. And change that file as I've sketched out below.

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(**convert this file to a data URI too before you convert the whole file to a data URI**) format('woff');
}

Once you've done that you can then encode the whole file as a data URI and @import it.

So, to reiterate step by step...

1. Convert http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff to a data URI
2. Replace http://fonts.googleapis.com/css?family=Indie+Flower with a version that has the data URI from step 1
3. Convert the file in step 2 to a data URI
4. @import the data URI from step 3

There are plenty of sites online that will create data URIs.

---

Related Topics