Use an svg logo

This is a simplified example!

In your template file use the following code to set up the logo.

<div class="logo">
  <a href="/" title="<?php print t('Home'); ?>" rel="home" class="header__logo" id="logo" style="display: inline-block;">
    <object id="header-logo"  type="image/svg+xml" data='/<?php print drupal_get_path('theme', $GLOBALS['theme']) . '/logo.svg'; ?>' alt="<?php print t('Home'); ?>" style="pointer-events: none;width:100%">
      <img src="<?php print theme_get_setting('logo') ?>" alt="<?php $site_name ?>" title="<?php $site_name ?>"/>
    </object>
  </a>
</div>

This code uses the logo.svg and logo.png files in your theme directory. If you want be able to upload your own files in the theme settings, you'll have to add your own code.

The nested img in the object tag guarantees a fall back for browsers that do not support the svg format.

To make the link on the object tag work properly you need to add "display:inline-block" to the a href and "pointer-events:none to the object tag.

In order to get the SVG to scale automatically, open up the SVG file and look for the <svg> opening tag. Add the viewBox attribute to set the normal scale of the image.
viewBox="0 0 200 200"
The four values are: x and y of the 0,0 point, the width and the height.

I normally create the SVG image in the size I need it in the site at normal resolution. So for example 200 by 200 pixels. I set the viewBox to that same size in the SVG file.

Once the viewBox is set you can add scaling to the image using CSS and it will scale without any problem.