-1

HTML

<svg viewBox="0 0 1024 1024">
    <path d="M624 96h16l192 224v576.295c0 34.963-28.617 63.705-63.918 63.705h-480.165c-35.408 0-63.918-28.759-63.918-64.235v-735.531c0-35.488 28.693-64.235 64.088-64.235h335.912zM608 128h-320.142c-17.595 0-31.858 14.568-31.858 31.855v736.291c0 17.593 14.551 31.855 31.999 31.855h480.003c17.672 0 31.999-14.238 31.999-31.789v-544.211h-128.067c-35.309 0-63.933-28.37-63.933-64.189v-159.811zM640 144v143.719c0 17.828 14.421 32.281 31.896 32.281h118.503l-150.398-176zM320 320v32h224v-32h-224zM320 224v32h224v-32h-224zM320 416v32h416v-32h-416zM320 512v32h416v-32h-416zM320 608v32h416v-32h-416zM320 704v32h416v-32h-416zM320 800v32h416v-32h-416z" />
</svg>

CSS

svg { width:20px; height:20px; }

output 1 (Firefox 57.0.2)

firefox

output 2 (Chrome 63.0)

firefox

Scaling the image as shown above makes it look blurry. (https://jsfiddle.net/wutx56co/)

If you know the solution, I would like to answer. Thanks.

left click
  • 894
  • 10
  • 21
  • It seems to me the only reason it’s blurry is because your screen is low resolution and the design doesn’t align with your screen’s pixel grid. The design uses a 32 units grid, so each line is at a multiple of 20 * 32 / 1024 pixels, which is not an integer (0.625). If you want to keep the exact same design, you need to increase the size to 32px for a regular 1x resolution screen. Otherwise you’ll need to redesign with a different grid (probably means changing the number of lines in the design). – jcaron Dec 27 '17 at 11:23
  • @jcaron I'm not good at English very well, but I know a little bit. It seems that I need to study more about the screen in order to place it in a right pixel. thanks. – left click Dec 28 '17 at 15:26

1 Answers1

0

try applying this

svg {
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0);

}

itsrajon
  • 283
  • 2
  • 15