0

I have this euro currency icon from Material Design: enter image description here

Originally it was filled, I removed the fill but then noticed that of course it has outlines on each side. Now I want to have a euro symbol with the proportions like this one, but thinner. Basically my idea would be to retrace the inside like that:

enter image description here

How can I do that? Actually the only issue I have is the curve as I don't know how to retrace such a curve.

SVG for the outlined euro icon is:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
    <title>icon/action/euro_symbol_24px</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M12,15.5 C9.49,15.5 7.32,14.08 6.24,12 L12,12 L12,10 L5.58,10 C5.53,9.67 5.5,9.34 5.5,9 C5.5,8.66 5.53,8.33 5.58,8 L12,8 L12,6 L6.24,6 C7.32,3.92 9.5,2.5 12,2.5 C13.61,2.5 15.09,3.09 16.23,4.07 L18,2.3 C16.41,0.87 14.3,0 12,0 C8.08,0 4.76,2.51 3.52,6 L0,6 L0,8 L3.06,8 C3.02,8.33 3,8.66 3,9 C3,9.34 3.02,9.67 3.06,10 L0,10 L0,12 L3.52,12 C4.76,15.49 8.08,18 12,18 C14.31,18 16.41,17.13 18,15.7 L16.22,13.93 C15.09,14.91 13.62,15.5 12,15.5 Z" id="path-1"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icon/action/euro_symbol_24px" transform="translate(1.000000, 1.000000)">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use stroke="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
            <path d="M-6.29726705,1.05445607 C5.87708839,-5.22503215 -0.858812505,-3.59502269 14.1257734,-2.83951891" id="Path-3" stroke="#979797" fill="#D8D8D8" mask="url(#mask-2)"></path>
        </g>
    </g>
</svg>

What I mean by thin is an icon with only a 1px wide stroke like the blue draft here:

enter image description here Left side shows the euro symbol with removed stroke but added fill, right side shows a mockup of a euro symbol with only 1 px stroke (1 px border in Sketch)

  • You might find better luck using the official drawing specifications to draw your own at the desired thickness, though it would seem that the thickness of the character is baked into the design's proportions. en.wikipedia.org/wiki/Euro_sign#/media/… – superluminal Jan 14 at 22:08
0

Ermmm....

<g id="Page-1" stroke="none" stroke-width="0" fill="000000" fill-rule="evenodd">

enter image description here

Just remove the stroke and set the fill to a color...

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
    <title>icon/action/euro_symbol_24px</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M12,15.5 C9.49,15.5 7.32,14.08 6.24,12 L12,12 L12,10 L5.58,10 C5.53,9.67 5.5,9.34 5.5,9 C5.5,8.66 5.53,8.33 5.58,8 L12,8 L12,6 L6.24,6 C7.32,3.92 9.5,2.5 12,2.5 C13.61,2.5 15.09,3.09 16.23,4.07 L18,2.3 C16.41,0.87 14.3,0 12,0 C8.08,0 4.76,2.51 3.52,6 L0,6 L0,8 L3.06,8 C3.02,8.33 3,8.66 3,9 C3,9.34 3.02,9.67 3.06,10 L0,10 L0,12 L3.52,12 C4.76,15.49 8.08,18 12,18 C14.31,18 16.41,17.13 18,15.7 L16.22,13.93 C15.09,14.91 13.62,15.5 12,15.5 Z" id="path-1"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="0" fill="000000" fill-rule="evenodd">
        <g id="icon/action/euro_symbol_24px" transform="translate(1.000000, 1.000000)">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use stroke="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
            <path d="M-6.29726705,1.05445607 C5.87708839,-5.22503215 -0.858812505,-3.59502269 14.1257734,-2.83951891" id="Path-3" stroke="#979797" fill="#D8D8D8" mask="url(#mask-2)"></path>
        </g>
    </g>
</svg>
| improve this answer | |
  • thanks for your reply, but this is still no thin icon. I want an icon where the stroke is only 1px thin. When you set the fill, the "optical stroke" is the distance between the two outlines. (I am new to Sketch and paths, so feel free to correct me if I am wrong). Do you get what I mean? – stefan.at.wpf Jan 14 at 16:49
  • Updated my post above with a mockup of what I want to have compared to the result that using fill instead of stroke gives me. Using fill is still thicker than a one px stroke. – stefan.at.wpf Jan 14 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.