How do I add an .svg file as a cursor?

[Edrol97]

I want to add an svg file as a cursor as it is a lossless format. How do I do this? When I try using the same method as I do for a .png it defaults to the default mouse cursor. Note: I have tried the following code:

body{
  cursor: url(img/background/cursors/Cursor.svg)}

as well as Base64 code

 

[Johna]

Hi there, this is likely due to your svg being too large. The maximum size for a cursor is 128x128px, and 32x32 is recommended. Change the width and height attributes in the svg to something less than or equal to 128.

cursor - CSS: Cascading Style Sheets | MDN

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

developer.mozilla.org

If this isn't the case and your svg is below 128px, could you post the code of the svg?

 

[Edrol97]

I want to add an svg file as a cursor as it is a lossless format. How do I do this? When I try using the same method as I do for a .png it defaults to the default mouse cursor.

Hi there, this is likely due to your svg being too large. The maximum size for a cursor is 128x128px, and 32x32 is recommended. Change the width and height attributes in the svg to something less than or equal to 128.

cursor - CSS: Cascading Style Sheets | MDN

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

developer.mozilla.org

If this isn't the case and your svg is below 128px, could you post the code of the svg?

It's below 128px on both axes. Here is the base64 encoding and how I'm using it:

cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjIuOTYgMzMuMjgiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICMyMzFmMjA7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMS45NSw0LjY5Yy40Myw1LjczLDEuNzQsMTEuNCwxLjM2LDE3LjE4aDIuNzJsLS4wNC0uOTdjLS4wNy0xLjc4LTIuNTQtMS43MS0yLjcyLDAtLjA4LjcxLS4yMSwxLjQxLS4zNywyLjExLS4zNCwxLjQ1LDEuNzQsMi40NiwyLjQ5LDEuMDUuOC0xLjUyLDEuODYtMi43NiwzLjIxLTMuODFsLTIuMTQtLjI4YzIuMSwzLjM5LDQuMjEsNi43Nyw2LjU1LDEwLC40Ni42NCwxLjUzLDEuMDEsMi4xNC4yOGwxLjA1LTEuMjhjLjUxLS42MS41LTEuMzEsMC0xLjkyLTEuMDYtMS4zLTEuODMtMi44OC0yLjY5LTQuMzEtLjkxLTEuNTEtMS44Mi0zLjAyLTIuNzMtNC41M2wtLjgxLDJjMi4zNy0uNDgsNC43Mi0xLjA0LDcuMDUtMS42OCwxLjE3LS4zMiwxLjI5LTEuODYuMzItMi40OS00LjkyLTMuMTctOC43OC03LjYxLTEyLjU1LTEyLjAzLS45LTEuMDUtMi42NS4wNy0yLjI3LDEuMzIsMS40NCw0LjgzLDIuNTksOS43NSwzLjQ0LDE0LjcybDIuNDktMS4wNWMtLjY3LS45LS44NS0yLjA1LTEuMTItMy4xMi0uMzEtMS4yMi0uNTktMi40NS0uNzUtMy43bC0yLjY3LjM2Yy4zNiwxLjkuNzEsMy43OSwxLjA3LDUuNjkuMjksMS41MywyLjY4LDEuMTQsMi42Ny0uMzYsMC0yLjM5LDAtNC43OC4wMy03LjE3bC0yLjMyLjk2YzEuODQsMS42NywyLjkyLDMuOTksNC44NSw1LjU2bDEuNjUtMi4xNGMtLjUxLS4zNi0xLjAyLS43My0xLjUzLTEuMDktMS4yNi0uOS0yLjc4LDEuMS0xLjY1LDIuMTQsMS4wNi45NywyLjE1LDEuOTIsMy4yNiwyLjg0bC45Ni0yLjMyYy0xLjE1LS4wNC0yLjIzLS4yMi0zLjMzLS41M2wtLjcyLDIuNjIsMy40NS41NS4zNi0yLjY3LTUuMzQuMnYyLjcybDIuNTMtLjExLS42OS0yLjUzLTMuODgsMS44NCwxLjY1LDIuMTQsMS42Mi0xLjI4LTEuOTItMS45MmMtLjc2Ljg3LTEuNzYsMS4zMy0yLjgsMS44bDEuMzcsMi4zNWMyLjQxLTEuNiw0Ljg1LTMuMjIsNy41Ny00LjI0LDEuNDYtLjU1LDEuMTktMi41Mi0uMzYtMi42Ny0xLjk1LS4xOS00LjA3LjgzLTUuODcsMS40OGwxLjA1LDIuNDljLjk5LS41NCwyLTEuMDUsMy4wMi0xLjUzLDEuNC0uNjYuNDEtMi45Mi0xLjA1LTIuNDlzLTIuODcuNzgtNC4zMywxLjA1bC43MiwyLjYyYzEuMzQtLjUxLDIuNjYtMS4xMiwzLjMyLTIuNDguNDMtLjg5LS4wOC0yLjA3LTEuMTctMi4wNS0uNDQuMDEtLjg4LjAxLTEuMzItLjAybC0uNTEtLjA2Yy0uNDktLjE0LS41Ny0uMTMtLjI1LjAybC40Ljk2Yy0uMDEuMjMuNzEtLjY5LjgyLS44Mi4zNi0uNDMuNzItLjg1LDEuMDktMS4yNy41Ny0uNjUuNTMtMS42OC0uMjgtMi4xNC0xLjM1LS43Ny0yLjIzLTEuOTItMi42My0zLjQybC0yLjQ5LDEuMDVjMS44NCwzLjIxLDMuNDMsNi41NSw0LjcyLDEwLjAxbDItMS41NGMtMS4yNS0uNTYtMS44OS0yLjk4LTIuMzQtNC4xOC0uNjEtMS42My0xLjE4LTMuMjctMS43NS00LjkybC0yLjQ5LDEuMDVjMS44MywzLjcsMy44MSw3LjMyLDUuOTMsMTAuODYuNzYsMS4yNywzLjA5LjQzLDIuNDktMS4wNXMtMS4wOC0zLjA1LTEuMzgtNC42NmwtMi40OSwxLjA1YzEuNDQsMy4wMy43Niw2LjYzLDEuNzUsOS44bDIuMjctMS4zMmMtLjYyLS43NS0xLjEzLTEuNi0xLjUtMi41bC0yLjI3LDEuMzJjMi4wMiwyLjUsMy4xOCw1LjU1LDUuMjQsOC4wNC45OCwxLjE4LDMuMDEtLjM3LDIuMTQtMS42NS0xLjMzLTEuOTQtMi40OS0zLjk4LTMuNDgtNi4xMWwtMi4xNCwxLjY1YzEuNzMsMS41OSwzLjE1LDMuMzksNC4yOCw1LjQ1bDIuMzUtMS4zN2MtMS43NS0yLjMtMy4yMS00LjgtNC42NS03LjNsLTIuMTQsMS42NWMxLjA2LDEuMTcsMS44OCwyLjQ3LDIuNTMsMy45LjcyLDEuNTksMy4wNy4yMSwyLjM1LTEuMzdzLTEuNzQtMy4xMi0yLjk2LTQuNDVjLTEuMDUtMS4xNi0yLjkuMzMtMi4xNCwxLjY1LDEuNDQsMi41MSwyLjksNSw0LjY1LDcuMywxLjAzLDEuMzYsMy4yMi4yMSwyLjM1LTEuMzctMS4yMy0yLjI1LTIuODItNC4yNy00LjctNi0xLjE4LTEuMDgtMi43OC4yNy0yLjE0LDEuNjUsMSwyLjEzLDIuMTYsNC4xNywzLjQ4LDYuMTFsMi4xNC0xLjY1Yy0yLjA1LTIuNDctMy4yMi01LjUzLTUuMjQtOC4wNC0uODMtMS4wMy0yLjc4LjA4LTIuMjcsMS4zMi41NiwxLjM3LDEuMjYsMi41NiwyLjIsMy43Ljg3LDEuMDcsMi42Ni0uMDgsMi4yNy0xLjMyLTEuMDgtMy40NC0uNDUtNy4xMi0yLjAzLTEwLjQ1LS43LTEuNDctMi43Ni0uMzctMi40OSwxLjA1LjMxLDEuNi43NiwzLjE1LDEuMzgsNC42NmwyLjQ5LTEuMDVjLTIuMTMtMy41NC00LjExLTcuMTYtNS45My0xMC44Ni0uNjgtMS4zNy0yLjk5LS40MS0yLjQ5LDEuMDUuNzEsMi4wNSwxLjQsNC4xMiwyLjIyLDYuMTMuNjUsMS42LDEuNDIsMy44MywzLjEyLDQuNTkuOTYuNDMsMi40Ni0uMywyLTEuNTQtMS4zNy0zLjY5LTMuMDMtNy4yNS00Ljk5LTEwLjY2LS43Ny0xLjM0LTIuODgtLjQ0LTIuNDksMS4wNS41NywyLjE2LDEuOTQsMy45NCwzLjg4LDUuMDVsLS4yOC0yLjE0Yy0uODgsMS4wMS0zLjExLDIuODMtMi42Niw0LjM4LjQ3LDEuNjIsMy4wNiwxLjQ5LDQuMzYsMS40NmwtMS4xNy0yLjA1Yy0uMzQuNy0xLC45Ni0xLjcsMS4yMy0xLjYzLjYyLTEuMDEsMi45NS43MiwyLjYyLDEuNDYtLjI3LDIuOS0uNjIsNC4zMy0xLjA1bC0xLjA1LTIuNDljLTEuMDIuNDgtMi4wMy45OS0zLjAyLDEuNTMtMS4zMy43Mi0uNDIsMy4wMiwxLjA1LDIuNDlzMy40OC0xLjU0LDUuMTUtMS4zOGwtLjM2LTIuNjdjLTIuOTYsMS4xMS01LjU5LDIuNzgtOC4yMiw0LjUxLTEuNDkuOTgtLjIxLDMuMDUsMS4zNywyLjM1LDEuMjUtLjU2LDIuNDQtMS4xNywzLjM1LTIuMjIsMS4xNy0xLjM1LS41Ny0yLjk5LTEuOTItMS45MmwtMS42MiwxLjI4Yy0xLjI5LDEuMDIuMzUsMi43NSwxLjY1LDIuMTRsMy44OC0xLjg0YzEuMjMtLjU4LjYyLTIuNTktLjY5LTIuNTNsLTIuNTMuMTFjLTEuNzQuMDctMS43NiwyLjc5LDAsMi43Mmw1LjM0LS4yYzEuNDUtLjA1LDEuOTQtMi40Mi4zNi0yLjY3bC0zLjQ1LS41NWMtMS42OS0uMjctMi40NSwyLjE0LS43MiwyLjYyLDEuMzMuMzcsMi42OC41Nyw0LjA2LjYzLDEuMTIuMDQsMS44OC0xLjU2Ljk2LTIuMzItMS4xMS0uOTItMi4xOS0xLjg3LTMuMjYtMi44NGwtMS42NSwyLjE0Yy41MS4zNiwxLjAyLjczLDEuNTMsMS4wOSwxLjI1Ljg5LDIuODUtMS4xNiwxLjY1LTIuMTQtMS45My0xLjU3LTMuMDEtMy44OS00Ljg1LTUuNTYtLjg2LS43OC0yLjMxLS4yNS0yLjMyLjk2LS4wMywyLjM5LS4wNCw0Ljc4LS4wMyw3LjE3bDIuNjctLjM2Yy0uMzYtMS45LS43MS0zLjc5LTEuMDctNS42OS0uMjgtMS40OS0yLjg3LTEuMTctMi42Ny4zNnMuNDgsMi45Ni44NSw0LjQzYy4zMiwxLjI5LjU4LDIuNjgsMS4zOSwzLjc3LjkzLDEuMjUsMi43NS41MiwyLjQ5LTEuMDUtLjg1LTQuOTctMS45OS05Ljg5LTMuNDQtMTQuNzJsLTIuMjcsMS4zMmMzLjkzLDQuNiw3Ljk4LDkuMTQsMTMuMSwxMi40NWwuMzItMi40OWMtMi4zMy42NC00LjY4LDEuMi03LjA1LDEuNjgtLjg2LjE3LTEuMjQsMS4yOS0uODEsMiwxLjg3LDMuMTEsMy41NSw2LjU3LDUuODUsOS4zOXYtMS45MmwtMS4wNSwxLjI4LDIuMTQuMjhjLTIuMzQtMy4yMy00LjQ1LTYuNjEtNi41NS0xMC0uNS0uODEtMS40NC0uODItMi4xNC0uMjgtMS41MiwxLjE5LTIuNzQsMi42Ni0zLjY0LDQuMzZsMi40OSwxLjA1Yy4yMi0uOTQuMzctMS44Ny40Ny0yLjgzaC0yLjcybC4wNC45N2MuMDcsMS43NiwyLjYsMS43NCwyLjcyLDAsLjM4LTUuNzctLjkzLTExLjQ1LTEuMzYtMTcuMTgtLjEzLTEuNzQtMi44NS0xLjc1LTIuNzIsMGgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuNjgsMi41NWMxLjc3LDEuMDYsMy4yLDIuNTgsNC42OSwzLjk4czMuMDksMi45MSw0LjY0LDQuMzdjMy4yMSwzLjAyLDYuNDIsNi4wNSw5LjYzLDkuMDdsLjk2LTIuMzJjLTMuMTMuMDItNi4yNC40Mi05LjI3LDEuMTktLjgyLjIxLTEuMjksMS4yNy0uODEsMiwxLjkzLDIuOTIsMy41OCw2LDQuOTUsOS4yMmwuNDktMS44NmMtMS4wMi42My0yLjEsMS4yMy0zLjA4LDEuOTEtLjY2LjQ2LS4wNi4wMy0uMDMuMTItLjEtLjI2LS4zNy0uNTItLjUzLS43NS0uMzktLjU3LS43Ny0xLjE0LTEuMTQtMS43My0xLjM2LTIuMTQtMi41NS00LjM3LTMuNi02LjY4bC0yLjM1LDEuMzdjMS41MSwzLjE1LDIuODQsNi40OCw0LjU2LDkuNTIsMS44NSwzLjI5LDUuMzYtLjU0LDcuMjQtMS45NCwxLjM5LTEuMDMuMDQtMy4zOS0xLjM3LTIuMzUtMSwuNzQtMiwxLjQ5LTMuMDEsMi4yMy0uMjQuMTgtLjQ5LjQtLjc1LjU2LjIxLS4xMi4yNS4yOC4wMy0uMzEtLjI1LS42Ni0uNjMtMS4zMS0uOTMtMS45NS0xLjE0LTIuMzgtMi4yOC00Ljc2LTMuNDItNy4xNC0uNzYtMS41OS0zLjA3LS4yLTIuMzUsMS4zNywxLjM3LDMsMi45OSw1Ljg4LDQuODgsOC41OS43NiwxLjA5LDEuNTYsMi4zOSwzLjEsMS45Ny42NS0uMTgsMS4yNi0uNjgsMS44Mi0xLjAzbDIuMzEtMS40NGMuNjgtLjQyLjc4LTEuMTcuNDktMS44Ni0xLjM2LTMuMjItMy4wMS02LjMtNC45NS05LjIybC0uODEsMmMyLjgxLS43MSw1LjY1LTEuMDcsOC41NS0xLjA5LDEuMTUsMCwxLjgzLTEuNS45Ni0yLjMyLTMuMzMtMy4xNC02LjY2LTYuMjctOS45OS05LjQxLTEuNjYtMS41Ny0zLjMzLTMuMTQtNC45OS00LjdDNi4xNSwyLjU5LDQuNzUsMS4yMiwzLjA1LjIsMS41NS0uNy4xOCwxLjY1LDEuNjgsMi41NWgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMuMjEsMjguMTZsNC43OS00LjljLjUtLjUxLjU1LTEuNDIsMC0xLjkycy0xLjM5LS41NC0xLjkyLDBjLTEuNiwxLjYzLTMuMTksMy4yNy00Ljc5LDQuOS0uNS41MS0uNTUsMS40MiwwLDEuOTJzMS4zOS41NCwxLjkyLDBoMFoiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zLjU3LDI3LjM4Yy0uMTgtMi4xMy0uMzctNC4yNi0uNDMtNi4zOXMuMDktNC4xMS4wNS02LjE2Yy0uMDctNC4xOS0uNjctOC4zNS0uMjYtMTIuNTRILjIxYy4wNCwzLjk5LjA5LDcuOTguMTMsMTEuOTdzLS4wMiw3LjgzLjM3LDExLjcyYy4xNywxLjcxLDIuNzIsMS43OSwyLjcyLDAtLjAyLTguMjItMS4yLTE2LjQzLS40Ny0yNC42NUMzLjExLS40MS4zOS0uNC4yNCwxLjMzYy0uNzMsOC4yMi40NSwxNi40My40NywyNC42NWgyLjcyYy0uMzgtMy44OS0uMzItNy44Mi0uMzctMTEuNzJzLS4wOS03Ljk4LS4xMy0xMS45N2MtLjAyLTEuNzgtMi41Ni0xLjcxLTIuNzIsMC0uNCw0LjE5LjIsOC4zNS4yNiwxMi41NC4wMywyLjA2LS4xMSw0LjExLS4wNSw2LjE2cy4yNCw0LjI2LjQzLDYuMzljLjE1LDEuNzMsMi44NywxLjc1LDIuNzIsMGgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIuMjEsMy44OGM1LjY4LDQuMTksMTAuNjgsOS4yMSwxNS42NSwxNC4xOSwxLjI0LDEuMjQsMy4xNi0uNjgsMS45Mi0xLjkyQzE0LjY0LDEwLjk5LDkuNDYsNS44NiwzLjU4LDEuNTNjLS41OS0uNDQtMS41Mi0uMS0xLjg2LjQ5LS40LjY5LS4xLDEuNDIuNDksMS44NmgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTExLjQ1LDIxLjM3Yy45My45MiwxLjU2LDEuNzQsMi4yNCwyLjg2LjYzLDEuMDQsMS4yMywyLjI5LDEuNjIsMy4yOGwyLjQ5LTEuMDVjLTEtMS44OC0yLjExLTMuNy0zLjM0LTUuNDRsLTIuMzUsMS4zN2MxLjM4LDEuOTEsMi42Myw0LjA5LDMuNTEsNi4xOGwyLjI3LTEuMzJjLS40My0uNC0uNzEtMS4wMy0xLjAyLTEuNjktLjM1LS43My0uNzItMS40NS0xLjEtMi4xNy0uNzgtMS40NS0xLjYzLTIuODctMi41NC00LjI0bC0uODEsMmMxLjk4LS4zMyw0LjAzLS41MSw2LjA4LS41NS43MS0uMDEsMS4zOS0uNjIsMS4zNi0xLjM2cy0uNi0xLjM3LTEuMzYtMS4zNmMtMi4yOC4wNC00LjU1LjI3LTYuOC42NC0uODUuMTQtMS4yNiwxLjMyLS44MSwyLC45NCwxLjQyLDEuODIsMi44OCwyLjYyLDQuMzkuMzkuNzQuNzcsMS40OCwxLjEzLDIuMjRzLjc0LDEuNDYsMS4zNCwyLjAyYy40NC40MSwxLjEyLjUyLDEuNjUuMjEuNDctLjI4Ljg1LS45OS42My0xLjU0LTEuMDEtMi40MS0yLjI1LTQuNy0zLjc4LTYuODMtLjQzLS41OS0xLjE4LS44OC0xLjg2LS40OS0uNTkuMzUtLjkxLDEuMjYtLjQ5LDEuODYsMS4yMywxLjc0LDIuMzUsMy41NSwzLjM0LDUuNDQuMzEuNTksMS4xMS44MiwxLjcuNTZzMS4wNC0uOTcuNzktMS42Yy0xLjA4LTIuNy0yLjQ3LTUuMjgtNC41Ni03LjM0LS41Mi0uNTItMS40LS41Mi0xLjkyLDBzLS41MiwxLjQxLDAsMS45MmgwWiIvPgo8L3N2Zz4="),
    url(img/background/cursors/pointer1.png), pointer;
}

 

[Johna]

Can you post the original non base64 encoded svg? Open the svg in any text editor and copy that code and paste it here.

If your original svg is the same as what I get when I convert the base64 to svg, then perhaps this is due to the svg not having width and height attributes at all.

 

[Edrol97]

Can you post the original non base64 encoded svg? Open the svg in any text editor and copy that code and paste it here.

If your original svg is the same as what I get when I convert the base64 to svg, then perhaps this is due to the svg not having width and height attributes at all.

<?xml version="1.0" encoding="UTF-8"?>

<svg id="Layer_1" xmlns="SVG namespace" viewBox="0 0 22.96 33.28">

  <defs>

    <style>

      .cls-1 {

        fill: #231f20;

      }



      .cls-2 {

        fill: #fff;

      }

    </style>

  </defs>

  <path class="cls-2" d="M1.95,4.69c.43,5.73,1.74,11.4,1.36,17.18h2.72l-.04-.97c-.07-1.78-2.54-1.71-2.72,0-.08.71-.21,1.41-.37,2.11-.34,1.45,1.74,2.46,2.49,1.05.8-1.52,1.86-2.76,3.21-3.81l-2.14-.28c2.1,3.39,4.21,6.77,6.55,10,.46.64,1.53,1.01,2.14.28l1.05-1.28c.51-.61.5-1.31,0-1.92-1.06-1.3-1.83-2.88-2.69-4.31-.91-1.51-1.82-3.02-2.73-4.53l-.81,2c2.37-.48,4.72-1.04,7.05-1.68,1.17-.32,1.29-1.86.32-2.49-4.92-3.17-8.78-7.61-12.55-12.03-.9-1.05-2.65.07-2.27,1.32,1.44,4.83,2.59,9.75,3.44,14.72l2.49-1.05c-.67-.9-.85-2.05-1.12-3.12-.31-1.22-.59-2.45-.75-3.7l-2.67.36c.36,1.9.71,3.79,1.07,5.69.29,1.53,2.68,1.14,2.67-.36,0-2.39,0-4.78.03-7.17l-2.32.96c1.84,1.67,2.92,3.99,4.85,5.56l1.65-2.14c-.51-.36-1.02-.73-1.53-1.09-1.26-.9-2.78,1.1-1.65,2.14,1.06.97,2.15,1.92,3.26,2.84l.96-2.32c-1.15-.04-2.23-.22-3.33-.53l-.72,2.62,3.45.55.36-2.67-5.34.2v2.72l2.53-.11-.69-2.53-3.88,1.84,1.65,2.14,1.62-1.28-1.92-1.92c-.76.87-1.76,1.33-2.8,1.8l1.37,2.35c2.41-1.6,4.85-3.22,7.57-4.24,1.46-.55,1.19-2.52-.36-2.67-1.95-.19-4.07.83-5.87,1.48l1.05,2.49c.99-.54,2-1.05,3.02-1.53,1.4-.66.41-2.92-1.05-2.49s-2.87.78-4.33,1.05l.72,2.62c1.34-.51,2.66-1.12,3.32-2.48.43-.89-.08-2.07-1.17-2.05-.44.01-.88.01-1.32-.02l-.51-.06c-.49-.14-.57-.13-.25.02l.4.96c-.01.23.71-.69.82-.82.36-.43.72-.85,1.09-1.27.57-.65.53-1.68-.28-2.14-1.35-.77-2.23-1.92-2.63-3.42l-2.49,1.05c1.84,3.21,3.43,6.55,4.72,10.01l2-1.54c-1.25-.56-1.89-2.98-2.34-4.18-.61-1.63-1.18-3.27-1.75-4.92l-2.49,1.05c1.83,3.7,3.81,7.32,5.93,10.86.76,1.27,3.09.43,2.49-1.05s-1.08-3.05-1.38-4.66l-2.49,1.05c1.44,3.03.76,6.63,1.75,9.8l2.27-1.32c-.62-.75-1.13-1.6-1.5-2.5l-2.27,1.32c2.02,2.5,3.18,5.55,5.24,8.04.98,1.18,3.01-.37,2.14-1.65-1.33-1.94-2.49-3.98-3.48-6.11l-2.14,1.65c1.73,1.59,3.15,3.39,4.28,5.45l2.35-1.37c-1.75-2.3-3.21-4.8-4.65-7.3l-2.14,1.65c1.06,1.17,1.88,2.47,2.53,3.9.72,1.59,3.07.21,2.35-1.37s-1.74-3.12-2.96-4.45c-1.05-1.16-2.9.33-2.14,1.65,1.44,2.51,2.9,5,4.65,7.3,1.03,1.36,3.22.21,2.35-1.37-1.23-2.25-2.82-4.27-4.7-6-1.18-1.08-2.78.27-2.14,1.65,1,2.13,2.16,4.17,3.48,6.11l2.14-1.65c-2.05-2.47-3.22-5.53-5.24-8.04-.83-1.03-2.78.08-2.27,1.32.56,1.37,1.26,2.56,2.2,3.7.87,1.07,2.66-.08,2.27-1.32-1.08-3.44-.45-7.12-2.03-10.45-.7-1.47-2.76-.37-2.49,1.05.31,1.6.76,3.15,1.38,4.66l2.49-1.05c-2.13-3.54-4.11-7.16-5.93-10.86-.68-1.37-2.99-.41-2.49,1.05.71,2.05,1.4,4.12,2.22,6.13.65,1.6,1.42,3.83,3.12,4.59.96.43,2.46-.3,2-1.54-1.37-3.69-3.03-7.25-4.99-10.66-.77-1.34-2.88-.44-2.49,1.05.57,2.16,1.94,3.94,3.88,5.05l-.28-2.14c-.88,1.01-3.11,2.83-2.66,4.38.47,1.62,3.06,1.49,4.36,1.46l-1.17-2.05c-.34.7-1,.96-1.7,1.23-1.63.62-1.01,2.95.72,2.62,1.46-.27,2.9-.62,4.33-1.05l-1.05-2.49c-1.02.48-2.03.99-3.02,1.53-1.33.72-.42,3.02,1.05,2.49s3.48-1.54,5.15-1.38l-.36-2.67c-2.96,1.11-5.59,2.78-8.22,4.51-1.49.98-.21,3.05,1.37,2.35,1.25-.56,2.44-1.17,3.35-2.22,1.17-1.35-.57-2.99-1.92-1.92l-1.62,1.28c-1.29,1.02.35,2.75,1.65,2.14l3.88-1.84c1.23-.58.62-2.59-.69-2.53l-2.53.11c-1.74.07-1.76,2.79,0,2.72l5.34-.2c1.45-.05,1.94-2.42.36-2.67l-3.45-.55c-1.69-.27-2.45,2.14-.72,2.62,1.33.37,2.68.57,4.06.63,1.12.04,1.88-1.56.96-2.32-1.11-.92-2.19-1.87-3.26-2.84l-1.65,2.14c.51.36,1.02.73,1.53,1.09,1.25.89,2.85-1.16,1.65-2.14-1.93-1.57-3.01-3.89-4.85-5.56-.86-.78-2.31-.25-2.32.96-.03,2.39-.04,4.78-.03,7.17l2.67-.36c-.36-1.9-.71-3.79-1.07-5.69-.28-1.49-2.87-1.17-2.67.36s.48,2.96.85,4.43c.32,1.29.58,2.68,1.39,3.77.93,1.25,2.75.52,2.49-1.05-.85-4.97-1.99-9.89-3.44-14.72l-2.27,1.32c3.93,4.6,7.98,9.14,13.1,12.45l.32-2.49c-2.33.64-4.68,1.2-7.05,1.68-.86.17-1.24,1.29-.81,2,1.87,3.11,3.55,6.57,5.85,9.39v-1.92l-1.05,1.28,2.14.28c-2.34-3.23-4.45-6.61-6.55-10-.5-.81-1.44-.82-2.14-.28-1.52,1.19-2.74,2.66-3.64,4.36l2.49,1.05c.22-.94.37-1.87.47-2.83h-2.72l.04.97c.07,1.76,2.6,1.74,2.72,0,.38-5.77-.93-11.45-1.36-17.18-.13-1.74-2.85-1.75-2.72,0h0Z"/>

  <path class="cls-1" d="M1.68,2.55c1.77,1.06,3.2,2.58,4.69,3.98s3.09,2.91,4.64,4.37c3.21,3.02,6.42,6.05,9.63,9.07l.96-2.32c-3.13.02-6.24.42-9.27,1.19-.82.21-1.29,1.27-.81,2,1.93,2.92,3.58,6,4.95,9.22l.49-1.86c-1.02.63-2.1,1.23-3.08,1.91-.66.46-.06.03-.03.12-.1-.26-.37-.52-.53-.75-.39-.57-.77-1.14-1.14-1.73-1.36-2.14-2.55-4.37-3.6-6.68l-2.35,1.37c1.51,3.15,2.84,6.48,4.56,9.52,1.85,3.29,5.36-.54,7.24-1.94,1.39-1.03.04-3.39-1.37-2.35-1,.74-2,1.49-3.01,2.23-.24.18-.49.4-.75.56.21-.12.25.28.03-.31-.25-.66-.63-1.31-.93-1.95-1.14-2.38-2.28-4.76-3.42-7.14-.76-1.59-3.07-.2-2.35,1.37,1.37,3,2.99,5.88,4.88,8.59.76,1.09,1.56,2.39,3.1,1.97.65-.18,1.26-.68,1.82-1.03l2.31-1.44c.68-.42.78-1.17.49-1.86-1.36-3.22-3.01-6.3-4.95-9.22l-.81,2c2.81-.71,5.65-1.07,8.55-1.09,1.15,0,1.83-1.5.96-2.32-3.33-3.14-6.66-6.27-9.99-9.41-1.66-1.57-3.33-3.14-4.99-4.7C6.15,2.59,4.75,1.22,3.05.2,1.55-.7.18,1.65,1.68,2.55h0Z"/>

  <path class="cls-1" d="M3.21,28.16l4.79-4.9c.5-.51.55-1.42,0-1.92s-1.39-.54-1.92,0c-1.6,1.63-3.19,3.27-4.79,4.9-.5.51-.55,1.42,0,1.92s1.39.54,1.92,0h0Z"/>

  <path class="cls-1" d="M3.57,27.38c-.18-2.13-.37-4.26-.43-6.39s.09-4.11.05-6.16c-.07-4.19-.67-8.35-.26-12.54H.21c.04,3.99.09,7.98.13,11.97s-.02,7.83.37,11.72c.17,1.71,2.72,1.79,2.72,0-.02-8.22-1.2-16.43-.47-24.65C3.11-.41.39-.4.24,1.33c-.73,8.22.45,16.43.47,24.65h2.72c-.38-3.89-.32-7.82-.37-11.72s-.09-7.98-.13-11.97c-.02-1.78-2.56-1.71-2.72,0-.4,4.19.2,8.35.26,12.54.03,2.06-.11,4.11-.05,6.16s.24,4.26.43,6.39c.15,1.73,2.87,1.75,2.72,0h0Z"/>

  <path class="cls-1" d="M2.21,3.88c5.68,4.19,10.68,9.21,15.65,14.19,1.24,1.24,3.16-.68,1.92-1.92C14.64,10.99,9.46,5.86,3.58,1.53c-.59-.44-1.52-.1-1.86.49-.4.69-.1,1.42.49,1.86h0Z"/>

  <path class="cls-1" d="M11.45,21.37c.93.92,1.56,1.74,2.24,2.86.63,1.04,1.23,2.29,1.62,3.28l2.49-1.05c-1-1.88-2.11-3.7-3.34-5.44l-2.35,1.37c1.38,1.91,2.63,4.09,3.51,6.18l2.27-1.32c-.43-.4-.71-1.03-1.02-1.69-.35-.73-.72-1.45-1.1-2.17-.78-1.45-1.63-2.87-2.54-4.24l-.81,2c1.98-.33,4.03-.51,6.08-.55.71-.01,1.39-.62,1.36-1.36s-.6-1.37-1.36-1.36c-2.28.04-4.55.27-6.8.64-.85.14-1.26,1.32-.81,2,.94,1.42,1.82,2.88,2.62,4.39.39.74.77,1.48,1.13,2.24s.74,1.46,1.34,2.02c.44.41,1.12.52,1.65.21.47-.28.85-.99.63-1.54-1.01-2.41-2.25-4.7-3.78-6.83-.43-.59-1.18-.88-1.86-.49-.59.35-.91,1.26-.49,1.86,1.23,1.74,2.35,3.55,3.34,5.44.31.59,1.11.82,1.7.56s1.04-.97.79-1.6c-1.08-2.7-2.47-5.28-4.56-7.34-.52-.52-1.4-.52-1.92,0s-.52,1.41,0,1.92h0Z"/>

</svg>

 

[Johna]

Try adding width and/or height attributes less than 128 and see if that solves the problem.

 

[tomliv]

Try adding width and/or height attributes less than 128 and see if that solves the problem.

Try this instead:

<svg id="Layer_1" xmlns="SVG namespace" viewBox="0 0 22.96 33.28" width="22.96" height="33.28">

Added width and height to this line.

Also, I recommend running SVGs through an optimizer such as

SVGOMG - SVGO's Missing GUI

Easy & visual compression of SVG images.

jakearchibald.github.io