Why Does Svg Get Blurred When Scaled Under Webkit Browsers

Why does SVG Path get blurred when I use scale?

I found a solution to my problem. I changed the blink-keyframe from transform:scale(1, 0.1) to transform:scale(1, 0.2) and now the animation works fine.

Snippet:

.info-eyes {
    animation-name: info-eyes;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    transform-origin: 0% 75%;
}
  
 
  .info-iris {
    animation-name: info-iris;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }

  @keyframes info-eyes {
    0%   {transform:scale(1, 1) }
    96%  {transform:scale(1, 1) }
    98%  {transform:scale(1, 0.2) }
    100% {transform:scale(1, 1)  }
    
  }
  
  @keyframes info-iris {
    0%   {transform: translate(0%, 0%); opacity: 100%;; }
    25%  {transform: translate(0%, 8%); opacity: 100%;} 
    50%  {transform: translate(8%, 8%); opacity: 100%;}
    75%  {transform: translate(8%, 8%); opacity: 100%;}
    96%  {transform: translate(0%, 0%); opacity: 100%;}
    98%  {transform: translate(0%, 0%); opacity: 0%;}
    100% {transform: translate(0%, 0%); opacity: 100%;}
  }

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
    <defs>
      <style>
        .a {
          fill: none;
        }

        .b {
          clip-path: url(#a);
        }

        .h {
          fill: #fff;
        }

      </style>
      <clipPath id="a">
        <rect class="a" width="81.7" height="75.3" />
      </clipPath>
    </defs>
    <g transform="translate(40.85 37.65)">
      <g class="b" transform="translate(-40.85 -37.65)">
        <path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
        <path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
        <path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
      </g>
    </g>
  </svg>
</body>

Blurry SVG on Safari After CSS transform scaling

So this is apparently a bug with Safari. I found a way to work around it by changing the scale to a scale3d. The catch is that the largest that the scale3d can be is (1,1,1). So basically you have to scale down from the larger size.

The code is now

$('.click').click(function() {  $('.svg').toggleClass('animated');});

.svg {  display: block;  width: 10em;  height: 10em;  position: absolute;  top: 0;  left: 50%;  background: url("http://blessing.micahmills.net/wp-content/themes/BlessingTourism/library/images/svg/BlessingLogo.svg") no-repeat top center;  background-size: contain;  opacity: 0;  -webkit-transform: translate(-33%, 33%) scale3d(1, 1, 1);      -ms-transform: translate(-33%, 33%) scale3d(1, 1, 1);          transform: translate(-33%, 33%) scale3d(1, 1, 1);  -webkit-transition: -webkit-transform .5s;          transition: transform .5s;  /*animation: scale .75s linear 2.5s forwards;*/  -webkit-animation: logoFadeIn .75s linear .5s forwards;          animation: logoFadeIn .75s linear .5s forwards;}.svg.animated {  -webkit-transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);      -ms-transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);          transform: translate(-33%, -33%) scale3d(0.3, 0.3, 0.3);}
@-webkit-keyframes logoFadeIn {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}
@keyframes logoFadeIn {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="click">Click Me Twice</button><a href="#" class='svg'></a>

SVGs are displaying blurry in Safari

If your svg contains straight horizontal and vertical lines, they may seem to blur or sharpen randomly as you zoom in and out, as they have to pick the optimum set of pixels on your screen, though that's a general browser thing, not a Safari thing.
Safari is known not to support filters or blur effects, but I don't know what's inside your svg. Your object tags make sense, and your fallback .png, but i don't understand why you then have svg tags with no content.

.svg image blurry at specific zoom levels in Chrome

The reason is that you use percentage to set the width of element the logo is in (parent element)

This means the logo is first rasterized from vector to an internal bitmap that is 100% of the size you set for the image. Then in your #header css rule you are using 80% for the header element which the image is inside.

What happens is that the internal bitmap the browser use to hold the rasterized vector image is scaled from 100% to 80% instead of re-rasterizing the vector. As this involves interpolation it will result in some blurry edges. This is a performance choice made by the browsers for parent's content.

The solution is to remove the 80% scaling of the header (parent) element. You can add a new rule and set the image width like this (you can of course use percentage instead - as long as the parent element isn't scaled this won't be an issue) - f.ex:

#header {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    /*width: 80%;*/
}

.header-img {
    width:200px;
    height:auto;
    }

Then in your html-code:

<img class="header-img" src="logo.svg" alt="Sample Image" />

(you could have set #header img {...} but this has a performance penalty).

Here is proof-of-concept (a small difference 100 to 80%, but visible - compare the last part):

Using 100% rasterized bitmap for logo size scaled by browser to 80%:

Sample Image

Removing 80% from header (parent) element and for sake of example setting image width to 200px:

Sample Image

Why does this SVG graphic bog down Webkit only when it's large?

The simple answer is that it's expensive to redraw. :) Even though the rainbow in the background isn't changing as you move the circle around, the browser may need to redraw those elements as you move other elements (the black circle) on top. Browsers usually have smart repainting, where they detect the dirty region and redraw as few elements as possible; for example, when the window is smaller, the browser doesn't have to redraw elements and parts of elements that are outside the visible area. However, there's no performance guarantee.

You can sometimes trick the browser into caching background elements into a bitmap for faster redraw by applying a CSS 3D transform (-webkit-transform: translate3d). For example, I use that here to rotate a complex scene. Click and drag on the interior of the circle to rotate:

http://mbostock.github.com/d3/talk/20111116/bundle.html

Alternatively, you could render the static background into a Canvas element, and then draw your dynamic SVG or HTML parts on top of it. This forces the browser to cache the background pixels for faster redraw.