Svg in Opera Using CSS Background-Image with Scaling

SVG in Opera using CSS background-image with scaling

Removing the width and height attributes in the svg makes it render nicely (tested in Opera 12).

Using SVG as CSS3 background-image with scaling

For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.

.svg-button {
    zoom: 300%;
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.

For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.

SVG background-image not scaling properly in Safari

I believe I have figured it out.

After extensive research (& I do mean extensive) I found many tips & tricks & conflicting articles. The issue was in my SVG (were we expecting anything else?).

A past article I read recommended I ensure that I have a viewbox attribute & remove the width & height attributes. While I did need to viewbox attribute I, also, needed the width & height attributes. Further detail can be found in this article here.

CSS background SVG animation strange behavior in Opera

Instead of animating the svg #a I'm animating the path. In order to make it work I'm using path{animation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50% 50%;}

#spinner{    width:200px;    height:200px;    background-color:#343a40;    background-image: url("data:image/svg+xml,%3Csvg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E path%7Banimation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50%25 50%25;%7D @keyframes faspin%7B 25%25%7Btransform:rotate(80deg)%7D 100%25%7Btransform:rotate(360deg)%7D %7D %3C/style%3E%3Cpath fill='white' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/%3E%3C/svg%3E");    background-repeat:no-repeat;    background-size:80%;    background-position:50%;}

<div id="spinner"></div>

How do I scale an SVG background-image without honoring aspect ratio in Firefox?

I needed to set the background-size. This snippet did the trick:

background-size: 100% 100%;

Part of the "stricter rendering model" was deferring sizing information to the page, rather than intrinsically within the SVG.

I thought I was defining this inside the background shorthand, but apparently instead I was specifying the background-position. I feel pretty silly about that, but it does appear to be the gnarliest and most-overgrown shorthand in CSS.

SVG background image - centered and scaled

Updated Answer corrected because I misunderstood the question.

To make your pattern do what you want (have a 10% padding), you should adjust the pattern's viewBox values.

So, for example, the non-padded viewBox for your anchor shape is:

viewBox="0 0 137 166"

You want to have a 10% padding, so let's add 17 around the edges. I chose 17 because it is approximately 10% of the height:

viewBox="-17 -17 171 200"

Here we have subtracted 17 from minX and minY and added 34 to the width and height. So your new pattern definition looks like this:

<pattern id="p2" height="1" width="1"
         patternUnits="objectBoundingBox"
         patternContentUnits="userSpaceOnUse"
         viewBox="-17 -17 171 200" preserveAspectRatio="xMidYMid meet">
    <g> ... </g>
</pattern>

Demo fiddle here

Using SVG as background image

With my solution you're able to get something similar:

Here is bulletproff solution:

Your html:
<input class='calendarIcon'/>

Your SVG:
i used fa-calendar-alt

(any IDE may open svg image as shown below)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>

To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address)

As far as you got all stuff you need, you're coming to css

.calendarIcon{
      //your url will be something like this:
      background-image: url("data:image/svg+xml,***<here place encoded svg>***");
      background-repeat: no-repeat;
    }

Note: these styling wont have any effect on encoded svg image

.{
      fill: #f00; //neither this
      background-color: #f00; //nor this
}

because all changes over the image must be applied directly to its svg code

<svg xmlns="" path="" fill="#f00"/></svg>

To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:

.calendarIcon{
      background-image: url("data:image/svg+xml,%3Csvg...svg%3E");
      background-repeat: no-repeat;
      padding-right: calc(1.5em + 0.75rem);
      background-position: center right calc(0.375em + 0.1875rem);
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

---

Related Topics