title: Usage of picture tag for svg types
body: <p>When I want to load pictures (in png or jpg format) for different screen types I
  use picture tag and describe sources:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;picture&gt;
    &lt;source
      media=&quot;(min-width: 960px)&quot;
      srcset=&quot;img/photo-drumset-desktop@1x.jpg 1x, img/photo-drumset-desktop@2x.jpg 2x&quot;
      alt=&quot;Фотография пользователя&quot;
    /&gt;
    &lt;source
      media=&quot;(min-width: 660px)&quot;
      srcset=&quot;img/photo-drumset-tablet@1x.jpg 1x, img/photo-drumset-tablet@2x.jpg 2x&quot;
      alt=&quot;Фотография пользователя&quot;
    /&gt;
    &lt;img
      src=&quot;img/photo-drumset-mobile.jpg&quot;
      srcset=&quot;img/photo-drumset-mobile.jpg 1x, img/photo-drumset-mobile@2x.jpg 2x&quot;
      alt=&quot;Фотография пользователя из социальной сети&quot;
    /&gt;
  &lt;/picture&gt;
  </code></pre>
  <p>What is better way to use it for svg tag (and then use fill and other css
  properties for it)? (without js)</p>