Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

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

Edrol97

Edrol97

Silver Coder
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:

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

as well as Base64 code
 
Last edited:
Sort by date Sort by votes
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 property - CSS | MDN

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

If this isn't the case and your svg is below 128px, could you post the code of the svg?
 
Upvote 0 Downvote
Edrol97 said:
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.
Click to expand...

Johna said:
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 property - CSS | MDN

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

If this isn't the case and your svg is below 128px, could you post the code of the svg?
Click to expand...
It's below 128px on both axes. Here is the base64 encoding and how I'm using it:

CSS: 
cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjIuOTYgMzMuMjgiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICMyMzFmMjA7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMS45NSw0LjY5Yy40Myw1LjczLDEuNzQsMTEuNCwxLjM2LDE3LjE4aDIuNzJsLS4wNC0uOTdjLS4wNy0xLjc4LTIuNTQtMS43MS0yLjcyLDAtLjA4LjcxLS4yMSwxLjQxLS4zNywyLjExLS4zNCwxLjQ1LDEuNzQsMi40NiwyLjQ5LDEuMDUuOC0xLjUyLDEuODYtMi43NiwzLjIxLTMuODFsLTIuMTQtLjI4YzIuMSwzLjM5LDQuMjEsNi43Nyw2LjU1LDEwLC40Ni42NCwxLjUzLDEuMDEsMi4xNC4yOGwxLjA1LTEuMjhjLjUxLS42MS41LTEuMzEsMC0xLjkyLTEuMDYtMS4zLTEuODMtMi44OC0yLjY5LTQuMzEtLjkxLTEuNTEtMS44Mi0zLjAyLTIuNzMtNC41M2wtLjgxLDJjMi4zNy0uNDgsNC43Mi0xLjA0LDcuMDUtMS42OCwxLjE3LS4zMiwxLjI5LTEuODYuMzItMi40OS00LjkyLTMuMTctOC43OC03LjYxLTEyLjU1LTEyLjAzLS45LTEuMDUtMi42NS4wNy0yLjI3LDEuMzIsMS40NCw0LjgzLDIuNTksOS43NSwzLjQ0LDE0LjcybDIuNDktMS4wNWMtLjY3LS45LS44NS0yLjA1LTEuMTItMy4xMi0uMzEtMS4yMi0uNTktMi40NS0uNzUtMy43bC0yLjY3LjM2Yy4zNiwxLjkuNzEsMy43OSwxLjA3LDUuNjkuMjksMS41MywyLjY4LDEuMTQsMi42Ny0uMzYsMC0yLjM5LDAtNC43OC4wMy03LjE3bC0yLjMyLjk2YzEuODQsMS42NywyLjkyLDMuOTksNC44NSw1LjU2bDEuNjUtMi4xNGMtLjUxLS4zNi0xLjAyLS43My0xLjUzLTEuMDktMS4yNi0uOS0yLjc4LDEuMS0xLjY1LDIuMTQsMS4wNi45NywyLjE1LDEuOTIsMy4yNiwyLjg0bC45Ni0yLjMyYy0xLjE1LS4wNC0yLjIzLS4yMi0zLjMzLS41M2wtLjcyLDIuNjIsMy40NS41NS4zNi0yLjY3LTUuMzQuMnYyLjcybDIuNTMtLjExLS42OS0yLjUzLTMuODgsMS44NCwxLjY1LDIuMTQsMS42Mi0xLjI4LTEuOTItMS45MmMtLjc2Ljg3LTEuNzYsMS4zMy0yLjgsMS44bDEuMzcsMi4zNWMyLjQxLTEuNiw0Ljg1LTMuMjIsNy41Ny00LjI0LDEuNDYtLjU1LDEuMTktMi41Mi0uMzYtMi42Ny0xLjk1LS4xOS00LjA3LjgzLTUuODcsMS40OGwxLjA1LDIuNDljLjk5LS41NCwyLTEuMDUsMy4wMi0xLjUzLDEuNC0uNjYuNDEtMi45Mi0xLjA1LTIuNDlzLTIuODcuNzgtNC4zMywxLjA1bC43MiwyLjYyYzEuMzQtLjUxLDIuNjYtMS4xMiwzLjMyLTIuNDguNDMtLjg5LS4wOC0yLjA3LTEuMTctMi4wNS0uNDQuMDEtLjg4LjAxLTEuMzItLjAybC0uNTEtLjA2Yy0uNDktLjE0LS41Ny0uMTMtLjI1LjAybC40Ljk2Yy0uMDEuMjMuNzEtLjY5LjgyLS44Mi4zNi0uNDMuNzItLjg1LDEuMDktMS4yNy41Ny0uNjUuNTMtMS42OC0uMjgtMi4xNC0xLjM1LS43Ny0yLjIzLTEuOTItMi42My0zLjQybC0yLjQ5LDEuMDVjMS44NCwzLjIxLDMuNDMsNi41NSw0LjcyLDEwLjAxbDItMS41NGMtMS4yNS0uNTYtMS44OS0yLjk4LTIuMzQtNC4xOC0uNjEtMS42My0xLjE4LTMuMjctMS43NS00LjkybC0yLjQ5LDEuMDVjMS44MywzLjcsMy44MSw3LjMyLDUuOTMsMTAuODYuNzYsMS4yNywzLjA5LjQzLDIuNDktMS4wNXMtMS4wOC0zLjA1LTEuMzgtNC42NmwtMi40OSwxLjA1YzEuNDQsMy4wMy43Niw2LjYzLDEuNzUsOS44bDIuMjctMS4zMmMtLjYyLS43NS0xLjEzLTEuNi0xLjUtMi41bC0yLjI3LDEuMzJjMi4wMiwyLjUsMy4xOCw1LjU1LDUuMjQsOC4wNC45OCwxLjE4LDMuMDEtLjM3LDIuMTQtMS42NS0xLjMzLTEuOTQtMi40OS0zLjk4LTMuNDgtNi4xMWwtMi4xNCwxLjY1YzEuNzMsMS41OSwzLjE1LDMuMzksNC4yOCw1LjQ1bDIuMzUtMS4zN2MtMS43NS0yLjMtMy4yMS00LjgtNC42NS03LjNsLTIuMTQsMS42NWMxLjA2LDEuMTcsMS44OCwyLjQ3LDIuNTMsMy45LjcyLDEuNTksMy4wNy4yMSwyLjM1LTEuMzdzLTEuNzQtMy4xMi0yLjk2LTQuNDVjLTEuMDUtMS4xNi0yLjkuMzMtMi4xNCwxLjY1LDEuNDQsMi41MSwyLjksNSw0LjY1LDcuMywxLjAzLDEuMzYsMy4yMi4yMSwyLjM1LTEuMzctMS4yMy0yLjI1LTIuODItNC4yNy00LjctNi0xLjE4LTEuMDgtMi43OC4yNy0yLjE0LDEuNjUsMSwyLjEzLDIuMTYsNC4xNywzLjQ4LDYuMTFsMi4xNC0xLjY1Yy0yLjA1LTIuNDctMy4yMi01LjUzLTUuMjQtOC4wNC0uODMtMS4wMy0yLjc4LjA4LTIuMjcsMS4zMi41NiwxLjM3LDEuMjYsMi41NiwyLjIsMy43Ljg3LDEuMDcsMi42Ni0uMDgsMi4yNy0xLjMyLTEuMDgtMy40NC0uNDUtNy4xMi0yLjAzLTEwLjQ1LS43LTEuNDctMi43Ni0uMzctMi40OSwxLjA1LjMxLDEuNi43NiwzLjE1LDEuMzgsNC42NmwyLjQ5LTEuMDVjLTIuMTMtMy41NC00LjExLTcuMTYtNS45My0xMC44Ni0uNjgtMS4zNy0yLjk5LS40MS0yLjQ5LDEuMDUuNzEsMi4wNSwxLjQsNC4xMiwyLjIyLDYuMTMuNjUsMS42LDEuNDIsMy44MywzLjEyLDQuNTkuOTYuNDMsMi40Ni0uMywyLTEuNTQtMS4zNy0zLjY5LTMuMDMtNy4yNS00Ljk5LTEwLjY2LS43Ny0xLjM0LTIuODgtLjQ0LTIuNDksMS4wNS41NywyLjE2LDEuOTQsMy45NCwzLjg4LDUuMDVsLS4yOC0yLjE0Yy0uODgsMS4wMS0zLjExLDIuODMtMi42Niw0LjM4LjQ3LDEuNjIsMy4wNiwxLjQ5LDQuMzYsMS40NmwtMS4xNy0yLjA1Yy0uMzQuNy0xLC45Ni0xLjcsMS4yMy0xLjYzLjYyLTEuMDEsMi45NS43MiwyLjYyLDEuNDYtLjI3LDIuOS0uNjIsNC4zMy0xLjA1bC0xLjA1LTIuNDljLTEuMDIuNDgtMi4wMy45OS0zLjAyLDEuNTMtMS4zMy43Mi0uNDIsMy4wMiwxLjA1LDIuNDlzMy40OC0xLjU0LDUuMTUtMS4zOGwtLjM2LTIuNjdjLTIuOTYsMS4xMS01LjU5LDIuNzgtOC4yMiw0LjUxLTEuNDkuOTgtLjIxLDMuMDUsMS4zNywyLjM1LDEuMjUtLjU2LDIuNDQtMS4xNywzLjM1LTIuMjIsMS4xNy0xLjM1LS41Ny0yLjk5LTEuOTItMS45MmwtMS42MiwxLjI4Yy0xLjI5LDEuMDIuMzUsMi43NSwxLjY1LDIuMTRsMy44OC0xLjg0YzEuMjMtLjU4LjYyLTIuNTktLjY5LTIuNTNsLTIuNTMuMTFjLTEuNzQuMDctMS43NiwyLjc5LDAsMi43Mmw1LjM0LS4yYzEuNDUtLjA1LDEuOTQtMi40Mi4zNi0yLjY3bC0zLjQ1LS41NWMtMS42OS0uMjctMi40NSwyLjE0LS43MiwyLjYyLDEuMzMuMzcsMi42OC41Nyw0LjA2LjYzLDEuMTIuMDQsMS44OC0xLjU2Ljk2LTIuMzItMS4xMS0uOTItMi4xOS0xLjg3LTMuMjYtMi44NGwtMS42NSwyLjE0Yy41MS4zNiwxLjAyLjczLDEuNTMsMS4wOSwxLjI1Ljg5LDIuODUtMS4xNiwxLjY1LTIuMTQtMS45My0xLjU3LTMuMDEtMy44OS00Ljg1LTUuNTYtLjg2LS43OC0yLjMxLS4yNS0yLjMyLjk2LS4wMywyLjM5LS4wNCw0Ljc4LS4wMyw3LjE3bDIuNjctLjM2Yy0uMzYtMS45LS43MS0zLjc5LTEuMDctNS42OS0uMjgtMS40OS0yLjg3LTEuMTctMi42Ny4zNnMuNDgsMi45Ni44NSw0LjQzYy4zMiwxLjI5LjU4LDIuNjgsMS4zOSwzLjc3LjkzLDEuMjUsMi43NS41MiwyLjQ5LTEuMDUtLjg1LTQuOTctMS45OS05Ljg5LTMuNDQtMTQuNzJsLTIuMjcsMS4zMmMzLjkzLDQuNiw3Ljk4LDkuMTQsMTMuMSwxMi40NWwuMzItMi40OWMtMi4zMy42NC00LjY4LDEuMi03LjA1LDEuNjgtLjg2LjE3LTEuMjQsMS4yOS0uODEsMiwxLjg3LDMuMTEsMy41NSw2LjU3LDUuODUsOS4zOXYtMS45MmwtMS4wNSwxLjI4LDIuMTQuMjhjLTIuMzQtMy4yMy00LjQ1LTYuNjEtNi41NS0xMC0uNS0uODEtMS40NC0uODItMi4xNC0uMjgtMS41MiwxLjE5LTIuNzQsMi42Ni0zLjY0LDQuMzZsMi40OSwxLjA1Yy4yMi0uOTQuMzctMS44Ny40Ny0yLjgzaC0yLjcybC4wNC45N2MuMDcsMS43NiwyLjYsMS43NCwyLjcyLDAsLjM4LTUuNzctLjkzLTExLjQ1LTEuMzYtMTcuMTgtLjEzLTEuNzQtMi44NS0xLjc1LTIuNzIsMGgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEuNjgsMi41NWMxLjc3LDEuMDYsMy4yLDIuNTgsNC42OSwzLjk4czMuMDksMi45MSw0LjY0LDQuMzdjMy4yMSwzLjAyLDYuNDIsNi4wNSw5LjYzLDkuMDdsLjk2LTIuMzJjLTMuMTMuMDItNi4yNC40Mi05LjI3LDEuMTktLjgyLjIxLTEuMjksMS4yNy0uODEsMiwxLjkzLDIuOTIsMy41OCw2LDQuOTUsOS4yMmwuNDktMS44NmMtMS4wMi42My0yLjEsMS4yMy0zLjA4LDEuOTEtLjY2LjQ2LS4wNi4wMy0uMDMuMTItLjEtLjI2LS4zNy0uNTItLjUzLS43NS0uMzktLjU3LS43Ny0xLjE0LTEuMTQtMS43My0xLjM2LTIuMTQtMi41NS00LjM3LTMuNi02LjY4bC0yLjM1LDEuMzdjMS41MSwzLjE1LDIuODQsNi40OCw0LjU2LDkuNTIsMS44NSwzLjI5LDUuMzYtLjU0LDcuMjQtMS45NCwxLjM5LTEuMDMuMDQtMy4zOS0xLjM3LTIuMzUtMSwuNzQtMiwxLjQ5LTMuMDEsMi4yMy0uMjQuMTgtLjQ5LjQtLjc1LjU2LjIxLS4xMi4yNS4yOC4wMy0uMzEtLjI1LS42Ni0uNjMtMS4zMS0uOTMtMS45NS0xLjE0LTIuMzgtMi4yOC00Ljc2LTMuNDItNy4xNC0uNzYtMS41OS0zLjA3LS4yLTIuMzUsMS4zNywxLjM3LDMsMi45OSw1Ljg4LDQuODgsOC41OS43NiwxLjA5LDEuNTYsMi4zOSwzLjEsMS45Ny42NS0uMTgsMS4yNi0uNjgsMS44Mi0xLjAzbDIuMzEtMS40NGMuNjgtLjQyLjc4LTEuMTcuNDktMS44Ni0xLjM2LTMuMjItMy4wMS02LjMtNC45NS05LjIybC0uODEsMmMyLjgxLS43MSw1LjY1LTEuMDcsOC41NS0xLjA5LDEuMTUsMCwxLjgzLTEuNS45Ni0yLjMyLTMuMzMtMy4xNC02LjY2LTYuMjctOS45OS05LjQxLTEuNjYtMS41Ny0zLjMzLTMuMTQtNC45OS00LjdDNi4xNSwyLjU5LDQuNzUsMS4yMiwzLjA1LjIsMS41NS0uNy4xOCwxLjY1LDEuNjgsMi41NWgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMuMjEsMjguMTZsNC43OS00LjljLjUtLjUxLjU1LTEuNDIsMC0xLjkycy0xLjM5LS41NC0xLjkyLDBjLTEuNiwxLjYzLTMuMTksMy4yNy00Ljc5LDQuOS0uNS41MS0uNTUsMS40MiwwLDEuOTJzMS4zOS41NCwxLjkyLDBoMFoiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zLjU3LDI3LjM4Yy0uMTgtMi4xMy0uMzctNC4yNi0uNDMtNi4zOXMuMDktNC4xMS4wNS02LjE2Yy0uMDctNC4xOS0uNjctOC4zNS0uMjYtMTIuNTRILjIxYy4wNCwzLjk5LjA5LDcuOTguMTMsMTEuOTdzLS4wMiw3LjgzLjM3LDExLjcyYy4xNywxLjcxLDIuNzIsMS43OSwyLjcyLDAtLjAyLTguMjItMS4yLTE2LjQzLS40Ny0yNC42NUMzLjExLS40MS4zOS0uNC4yNCwxLjMzYy0uNzMsOC4yMi40NSwxNi40My40NywyNC42NWgyLjcyYy0uMzgtMy44OS0uMzItNy44Mi0uMzctMTEuNzJzLS4wOS03Ljk4LS4xMy0xMS45N2MtLjAyLTEuNzgtMi41Ni0xLjcxLTIuNzIsMC0uNCw0LjE5LjIsOC4zNS4yNiwxMi41NC4wMywyLjA2LS4xMSw0LjExLS4wNSw2LjE2cy4yNCw0LjI2LjQzLDYuMzljLjE1LDEuNzMsMi44NywxLjc1LDIuNzIsMGgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIuMjEsMy44OGM1LjY4LDQuMTksMTAuNjgsOS4yMSwxNS42NSwxNC4xOSwxLjI0LDEuMjQsMy4xNi0uNjgsMS45Mi0xLjkyQzE0LjY0LDEwLjk5LDkuNDYsNS44NiwzLjU4LDEuNTNjLS41OS0uNDQtMS41Mi0uMS0xLjg2LjQ5LS40LjY5LS4xLDEuNDIuNDksMS44NmgwWiIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTExLjQ1LDIxLjM3Yy45My45MiwxLjU2LDEuNzQsMi4yNCwyLjg2LjYzLDEuMDQsMS4yMywyLjI5LDEuNjIsMy4yOGwyLjQ5LTEuMDVjLTEtMS44OC0yLjExLTMuNy0zLjM0LTUuNDRsLTIuMzUsMS4zN2MxLjM4LDEuOTEsMi42Myw0LjA5LDMuNTEsNi4xOGwyLjI3LTEuMzJjLS40My0uNC0uNzEtMS4wMy0xLjAyLTEuNjktLjM1LS43My0uNzItMS40NS0xLjEtMi4xNy0uNzgtMS40NS0xLjYzLTIuODctMi41NC00LjI0bC0uODEsMmMxLjk4LS4zMyw0LjAzLS41MSw2LjA4LS41NS43MS0uMDEsMS4zOS0uNjIsMS4zNi0xLjM2cy0uNi0xLjM3LTEuMzYtMS4zNmMtMi4yOC4wNC00LjU1LjI3LTYuOC42NC0uODUuMTQtMS4yNiwxLjMyLS44MSwyLC45NCwxLjQyLDEuODIsMi44OCwyLjYyLDQuMzkuMzkuNzQuNzcsMS40OCwxLjEzLDIuMjRzLjc0LDEuNDYsMS4zNCwyLjAyYy40NC40MSwxLjEyLjUyLDEuNjUuMjEuNDctLjI4Ljg1LS45OS42My0xLjU0LTEuMDEtMi40MS0yLjI1LTQuNy0zLjc4LTYuODMtLjQzLS41OS0xLjE4LS44OC0xLjg2LS40OS0uNTkuMzUtLjkxLDEuMjYtLjQ5LDEuODYsMS4yMywxLjc0LDIuMzUsMy41NSwzLjM0LDUuNDQuMzEuNTksMS4xMS44MiwxLjcuNTZzMS4wNC0uOTcuNzktMS42Yy0xLjA4LTIuNy0yLjQ3LTUuMjgtNC41Ni03LjM0LS41Mi0uNTItMS40LS41Mi0xLjkyLDBzLS41MiwxLjQxLDAsMS45MmgwWiIvPgo8L3N2Zz4="),
    url(img/background/cursors/pointer1.png), pointer;
}
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Johna said:
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.
Click to expand...
Code: 
<?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>
 
Last edited by a moderator:
Upvote 0 Downvote
Johna said:
Try adding width and/or height attributes less than 128 and see if that solves the problem.
Click to expand...

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
jakearchibald.github.io

SVGOMG - SVGO's Missing GUI for minifying SVGs

Easy & visual compression of SVG images.
jakearchibald.github.io jakearchibald.github.io
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom