title: Blurry SVG in pixijs
body: <p>I'm trying to use PIXIJs library to display SVG image, but on a smartphone the SVG seems blurry.</p>
  
  <p><a href="https://codepen.io/anon/pen/QaxqvP" rel="nofollow noreferrer">Here is a sample code</a></p>
  
  <pre><code>    var $ = window.jQuery;
      var PIXI = window.PIXI;
  
      $(document).ready(onReady);
  
  
      var devicePixelRatio;
      var width =800;
      var height=600;
  
      var scale = 5;
      var renderer;
      var stage;
  
      var canvas;
  
      function onReady() {
          devicePixelRatio = $(window).devicePixelRatio;
  
  
          canvas = window.document.createElement("canvas");
          canvas.style.width = width + "px";
          canvas.style.height = height + "px";
  
          var container = document.getElementById("container");
          container.appendChild(canvas);
  
          var svgimgtag = document.getElementById("svgimgtag");
  
          svgimgtag.style.top = 160 + "px";
          svgimgtag.style.left = 500 + "px";
          svgimgtag.style.width = 64 * scale + "px";
          svgimgtag.style.height = 64 * scale + "px";
          svgimgtag.src = 'https://rawgit.com/dentez/848fe2b6a8da7b3a78bacded90bd4f61/raw/89bb179753df9ee3e8b62d8c7a0c7620b6db144e/bee.svg';
  
  
          renderer = PIXI.autoDetectRenderer(width , height , {
              backgroundColor: 0xFFFFFF,
              view: canvas,
              resolution: devicePixelRatio
          });
  
          stage = new PIXI.Stage(0xFFFFFF);
  
          document.body.appendChild(renderer.view);
          renderer.view.style.position = 'absolute';
  
          requestAnimationFrame(update);
  
          beeTexture = new PIXI.Texture.fromImage('https://rawgit.com/dentez/848fe2b6a8da7b3a78bacded90bd4f61/raw/89bb179753df9ee3e8b62d8c7a0c7620b6db144e/bee.svg', undefined, undefined, scale);
  
          var bee = new PIXI.Sprite(beeTexture);
  
  
          bee.anchor.x = 0.5;
          bee.anchor.y = 1;
          bee.position.x = 400;
          bee.position.y = 300;
          //bunny.scale.set(1);
          stage.addChild(bee);
          renderer.resize(width, height);
      }
  
  
      function update() {
  
          renderer.render(stage);
          requestAnimationFrame(update);
      }
  </code></pre>
  
  <p>On desktop browser it seems ok, but when I try this on my smartphone or android emulator the SVG renders like this:</p>
  
  <p><a href="https://i.stack.imgur.com/rRnby.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rRnby.png" alt="enter image description here"></a></p>
  
  <p>(image on the left is PIXI-SVG; right, is an html img tag).</p>
  
  <p>Maybe It is something with devicePixelRatio, it seems that the browser "Zooms-in" to fit the screen - since on desktop if I zoom-in I can emulate the same behavior.
  What am I doing wrong? How is the correct way to show/scale SVG?</p>