How to convert an inkscape svg to a shopify svg

[PedroPrado]

I made my icons in inkscape and made all their svg. A guy here says that my svg is not optimized for shopify.

My svg:

<svg

   width="2000mm"

   height="2000mm"

   viewBox="0 0 2000 2000"

   version="1.1"

   id="svg1"

   inkscape:export-filename="ÍCONE CONTA MAIOR-000000ff-00000000.png"

   inkscape:export-xdpi="25.4"

   inkscape:export-ydpi="25.4"

   xml:space="preserve"

   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"

   sodipodi:docname="ÍCONE CONTA PARA O SITE.svg"

   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

   xmlns="http://www.w3.org/2000/svg"

   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview

     id="namedview1"

     pagecolor="#ffffff"

     bordercolor="#000000"

     borderopacity="0.25"

     inkscape:showpageshadow="2"

     inkscape:pageopacity="0.0"

     inkscape:pagecheckerboard="0"

     inkscape:deskcolor="#d1d1d1"

     inkscape:document-units="mm"

     showguides="true"

     inkscape:export-bgcolor="#ffffff00"

     inkscape:zoom="0.056568542"

     inkscape:cx="2430.6796"

     inkscape:cy="3349.9184"

     inkscape:window-width="1920"

     inkscape:window-height="1009"

     inkscape:window-x="1358"

     inkscape:window-y="-8"

     inkscape:window-maximized="1"

     inkscape:current-layer="layer1" /><defs

     id="defs1" /><g

     inkscape:label="Camada 1"

     inkscape:groupmode="layer"

     id="layer1"><g

       id="g1"

       transform="matrix(0.25006925,0,0,0.25006925,-629.93503,-409.4417)"

       style="display:none"><ellipse

         style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:732;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"

         id="path1-3"

         cx="6560.1636"

         cy="5204.5732"

         rx="555.74463"

         ry="555.67902" /><path

         id="path5-9-9"

         style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:732;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"

         d="M 7867.6062,7418.2477 A 1308.2513,1308.0968 0 0 0 6560.0011,6151.2602 1308.2513,1308.0968 0 0 0 5252.3999,7418.1245 Z" /></g><g

       id="g6"

       transform="matrix(0.23548275,0,0,0.23545495,-599.19834,-315.18804)"><path

         id="path5"

         style="display:none;fill:none;fill-opacity:0;stroke:#ffffff;stroke-width:777.388;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"

         d="M 8179.748,7056.3536 A 1389.2882,1389.2882 0 0 0 6791.146,5710.7264 1389.2882,1389.2882 0 0 0 5402.5481,7056.2227 Z" /><path

         id="path5-9"

         style="display:inline;fill:none;fill-opacity:0;stroke:#000000;stroke-width:260;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"

         d="M 8179.7485,7056.3533 A 1389.2882,1389.2882 0 0 0 6791.1465,5710.726 1389.2882,1389.2882 0 0 0 5402.5486,7056.2224 Z" /><circle

         style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:260;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"

         id="path1"

         cx="6791.3188"

         cy="4705.2798"

         r="590.16907" /></g></g></svg>

Svg that the guy converted for me:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-account" fill="none" viewBox="0 0 18 19" > <path fill-rule="evenodd" clip-rule="evenodd" d="m 9.0009261,0.5 c -2.2213192,0 -4.0309777,1.8180738 -4.0309777,4.0493861 0,2.2313095 1.809695,4.0493482 4.0309777,4.0493482 2.2211179,0 4.0309769,-1.8178836 4.0309769,-4.0493482 C 13.031903,2.3180387 11.2222,0.5 9.0009261,0.5 Z m 0,1.4619213 c 1.4189829,0 2.5756709,1.1609143 2.5756709,2.5874648 0,1.4249509 -1.155196,2.5874261 -2.5756709,2.5874261 -1.4190216,0 -2.5757087,-1.1609029 -2.5757087,-2.5874261 0,-1.4269689 1.156854,-2.5874648 2.5757087,-2.5874648 z m -9.445e-4,7.509921 c -4.5821318,0 -8.35517897,3.6722207 -8.49962328,8.2734237 -0.0128906,0.412488 0.31644154,0.75392 0.72725628,0.753978 L 16.772311,18.5 c 0.410829,-1.5e-5 0.740202,-0.341437 0.727332,-0.75394 C 17.35526,13.14392 13.582114,9.4718423 8.9999429,9.4718423 Z m 0,1.4619587 c 3.5296704,0 6.4993784,2.629892 6.9807464,6.10424 l -13.9614171,-6.8e-4 c 0.4817147,-3.47417 3.4513754,-6.10356 6.980632,-6.10356 z" fill="currentColor"> </svg>

As the guy didn't contact me, I didn't know how to optimize my own svg into an svg for shopify. Does anyone know how to teach me how to do this?

Link to my conversation with the guy: Re: How to change account/login icon in Dawn 14.0.0
https://community.shopify.com/c/shopify-scripts/how-to-change-account-login-icon-in-dawn-14-0-0/m-p/...

My store link: https://mi8w9lspkvkx4fju-78296449301.shopifypreview.com

[AcidPi · Accepted solution]

Hi @PedroPrado, 

Provided a new icon + css to your last message on the previous post - outlined some issues with the other custom SVG's dimensions.

Here are some steps to follow when replacing SVG icons on Shopify with Inkscape.

Disclaimer: There could be better ways, further optimisation steps or other SVG XML attributes required.
If you want to stop the hover effect, change color or change size - I recommend using CSS.

1. IMPORTANT: Ensure you match the viewBox and document dimensions of the currently used SVG icon.
   
   • File > Document Properties > Display
     Set Width + Height and viewBox Width + Height as PX
2. Optimise your SVG
   • Convert strokes to paths Path > Stroke to Path
   • Don't use Layers or Layer Groups
     
     • If Required group by Path > Union
   • Fill & Stroke ( most of these will default when applying Stroke to Path )
     
     • Fill
       • Select: Flat color
       • r=0, g=0, b=0, a=100
     • Stroke Paint
       • Select: Unset paint
       • Select: Any self-intersections or subpaths create holes in fills (fill-rule: evenodd)
     • Stroke Style
       • Leave as is, however before converting stroke to path this is when you can set the thickness of lines.
   • Remove as many nodes as possible without distorting your drawing
     less nodes = less coordinates = less size
   • File > Clean up document
3. IMPORTANT: File > Save As... > Plain SVG (*.)
   • Open newly created SVG in a code editor find the attribute d in <path>
   • Use the coordinates in the d attribute to update the d attribute in Shopify SVG file. 

Newly created SVG

Shopify SVG file

Regards