Given this Twitter icon from materialdesignicons.com:
<svg class="social-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>
I've found that I can change the path's fill color by adding a social-icon CSS class like this:
.social-icon {
fill: red;
}
<svg class="social-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>
Is it possible to "invert" the path coloring so that the Twitter bird itself becomes red instead of the surrounding?
Not with that <path>/<svg> alone. Basically It is a circle with the bird »cut out«, so all you can color is the circle without the bird.
You need to break the path apart into the background circle and the bird like so:
<svg>
<path
d="M 12,2 A 10,10 0 0 1 22,12 10,10 0 0 1 12,22 10,10 0 0 1 2,12 10,10 0 0 1 12,2 Z" />
<path
style="fill:#ff0000"
d="M 17.71,9.33 C 18.19,8.93 18.75,8.45 19,7.92 18.59,8.13 18.1,8.26 17.56,8.33 18.06,7.97 18.47,7.5 18.68,6.86 18.16,7.14 17.63,7.38 16.97,7.5 15.42,5.63 11.71,7.15 12.37,9.95 9.76,9.79 8.17,8.61 6.85,7.16 6.1,8.38 6.75,10.23 7.64,10.74 7.18,10.71 6.83,10.57 6.5,10.41 6.54,11.95 7.39,12.69 8.58,13.09 8.22,13.16 7.82,13.18 7.44,13.12 7.81,14.19 8.58,14.86 9.9,15 9,15.76 7.34,16.29 6,16.08 c 1.15,0.73 2.46,1.31 4.28,1.23 4.41,-0.2 7.36,-3.36 7.43,-7.98" />
</svg>
Related
I am trying to figure out how to use Tailwind CSS templates so that I can add my own logo instead of its template logo.
The tailwind template (salient) shows its SVG logo example as:
export function Logo(props) {
return (
<svg aria-hidden="true" viewBox="0 0 109 40" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
)
}
That renders just fine.
When I try to add my svg file that I generated in https://jakearchibald.github.io/svgomg/
I get a file with xmlns in its markup. If I remove the xmlns using the toggle on the menu at svgomg, then the image disappears. If I import it with the xmlns into the logo component provided by tailwindcss, I am getting stuck for the formatting steps required to integrate with that component.
I tried to remove all the width, height, fill and xmlns data from the markup created by svgomg, but the icon does not render.
The first fragment of the svg tag has:
<defs>
<clipPath
id="a"
>
<path
d="M97.742 171.805h179.516V203H97.742Zm0 0"
/>
</clipPath>
</defs>
<path
d="M61.738 292.654v-64.96c9.906 17.737 28.566 27.874 49.297 27.874 36.855 0 64.496-27.183 64.496-64.27 0-37.316-27.64-64.726-65.88-64.726-38.007 0-65.417 27.18-65.417 65.879v100.203Zm47.914-52.98c-27.871 0-47.914-19.582-47.914-48.375 0-29.024 20.273-49.063 48.144-49.063 28.102 0 48.14 20.04 48.14 48.832 0 29.024-20.269 48.606-48.37 48.606ZM330.78 292.654V192.451c0-38.7-27.184-65.879-65.419-65.879-38.238 0-65.652 27.41-65.652 64.727 0 37.086 27.414 64.27 64.27 64.27 20.73 0 39.386-10.138 49.523-27.876v64.961Zm-65.419-52.98c-28.105 0-48.375-19.582-48.375-48.606 0-28.793 20.27-48.832 48.145-48.832 28.102 0 48.371 20.04 48.371 49.063 0 28.793-20.27 48.375-48.14 48.375Zm0 0"
/>
<g clipPath="url(#a)"
>
Does anyone know how to format an SVG file for use the Tailwinds CSS templates?
If i copy the full svg from svgomg and replace the svg tag from tailwind salient template entirely, then a huge logo renders. If I use the viewbox settings (and delete height and width settings from svgomg) from the tailwind template, then nothing renders in the header and the footer logo renders left aligned.
The full svg made by svgomg is:
<svg xmlns="http://www.w3.org/2000/svg" width="500" viewBox="0 0 375 375" height="500" version="1.0">
<defs>
<clipPath id="a">
<path d="M146.258 167.793h82.484V318h-82.484Zm0 0"/>
</clipPath>
</defs>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
<path d="M105.378 223.545c0 6.332 2.418 11.977 6.45 16.008 4.03 4.148 9.558 6.566 16.007 6.566 6.106 0 11.863-2.418 15.895-6.566 4.031-4.031 6.566-9.676 6.566-16.008V174.94h2.535c6.102 0 11.516-2.418 15.547-6.45 4.031-4.03 6.45-9.445 6.45-15.437 0-6.102-2.419-11.633-6.45-15.664-4.031-4.032-9.445-6.332-15.547-6.332h-2.535v-15.09c0-6.106-2.535-11.863-6.566-15.895-4.032-4.03-9.79-6.562-15.895-6.562-6.449 0-11.976 2.531-16.008 6.562-4.03 4.032-6.449 9.79-6.449 15.895v15.09h-2.074c-6.336 0-11.633 2.3-15.55 6.332a22.42 22.42 0 0 0-6.333 15.664c0 5.992 2.418 11.406 6.332 15.437 3.918 4.032 9.215 6.45 15.551 6.45h2.074Zm-1.5-67.148c-1.957 0-3.453-1.614-3.453-3.457 0-2.188 1.496-3.458 3.453-3.458h20.387v-33.515c0-1.957 1.266-3.453 3.457-3.453 1.84 0 3.453 1.496 3.453 3.453v33.515h21.309c1.957 0 3.457 1.27 3.457 3.458 0 1.843-1.5 3.457-3.457 3.457h-21.309v66.918c0 1.84-1.613 3.453-3.453 3.453-2.191 0-3.457-1.614-3.457-3.453v-66.918ZM237.372 246.12c13.359 0 26.836-2.536 36.738-8.18 9.906-5.645 16.473-14.512 16.473-27.41 0-9.333-3.457-16.704-8.871-22.231-5.41-5.527-12.782-9.559-20.614-12.438 1.266.114 2.418.23 3.801.23 4.95 0 10.25-1.151 14.395-4.148 4.148-2.996 7.14-7.832 7.14-15.203 0-8.867-5.758-15.894-14.625-20.617-8.87-4.723-21.078-7.14-33.98-7.14-11.516 0-20.27 2.535-27.067 6.566-6.793 4.031-11.402 9.328-14.394 14.742-2.996 5.527-4.262 11.172-4.262 15.664 0 13.707 6.91 23.149 15.777 29.14-.691-.116-1.382-.23-1.957-.23h-1.957c-6.105 0-10.71 2.301-13.82 5.758-3.113 3.457-4.61 8.063-4.61 12.668 0 8.754 3.458 15.203 8.868 20.043 5.414 4.836 12.672 8.063 20.387 10.02 7.718 1.957 15.664 2.765 22.578 2.765Zm.23-19.122c-7.832-.46-12.902-1.035-17.394-2.418-4.493-1.265-8.407-3.226-14.395-6.797-1.27-.804-1.73-1.84-1.73-2.879 0-1.382 1.039-2.535 2.879-2.535 1.152 0 2.535.461 4.148 1.27 1.496.922 3.453 1.843 5.875 2.879 4.605 2.074 11.055 4.144 20.617 4.144 8.29 0 15.086-1.265 19.695-3.57 4.606-2.188 7.254-5.067 7.254-8.637 0-3.226-1.265-5.988-3.914-8.176-5.183-4.379-13.363-7.488-22.46-10.484-4.493-1.496-8.755-3.11-12.669-5.066-7.832-3.801-13.707-8.754-13.707-16.93 0-4.149 1.383-9.215 5.645-13.016 4.144-3.8 11.172-6.68 22.574-6.68 3.57 0 6.91.344 10.25.919 6.45 1.27 11.633 3.113 14.629 5.183 1.496 1.04 2.188 2.074 2.188 2.88 0 1.73-1.383 2.882-3.34 2.882-1.614 0-2.996-.23-4.149-.809a54.023 54.023 0 0 1-4.144-1.726c-3.227-1.266-7.371-2.418-14.86-2.418-8.175 0-13.59 1.265-17.16 3.453-3.57 2.191-4.953 5.414-4.953 9.101 0 2.88 1.266 5.41 3.914 7.372 5.184 4.144 13.246 7.37 22.461 10.593 4.492 1.73 8.754 3.57 12.668 5.645 7.719 4.148 13.594 9.558 13.594 17.508 0 11.863-11.75 18.312-33.516 18.312Zm0 0" fill="#155e75"/>
<g clip-path="url(#a)">
<path fill="#fff" d="M146.258 167.793h82.789v150.062h-82.79Zm0 0"/>
</g>
<path d="M168.592 181.422v15.828h-2.406v-15.828h-6.11v-1.969h14.626v1.969ZM197.78 197.25l-2.03-5.203h-8.11l-2.047 5.203h-2.5l7.266-17.797h2.734l7.156 17.797Zm-6.077-15.969-.125.344c-.211.7-.524 1.594-.938 2.687l-2.266 5.86h6.657l-2.282-5.875a26.774 26.774 0 0 1-.718-1.969ZM210.436 197.25v-17.797h2.407v17.797ZM158.998 233.25v-17.797h2.407v15.828h8.984v1.969ZM198.086 233.25h-2.875l-3.078-11.297c-.211-.707-.508-1.973-.891-3.797a220.61 220.61 0 0 1-.563 2.438c-.148.656-1.293 4.875-3.437 12.656h-2.875l-5.25-17.797h2.516l3.203 11.313c.375 1.406.722 2.859 1.047 4.359.195-.926.425-1.938.687-3.031.27-1.094 1.441-5.305 3.516-12.64h2.312l3.094 11.077a127.65 127.65 0 0 1 1.11 4.594l.109-.438c.226-.968.41-1.753.547-2.359.144-.613 1.332-4.906 3.562-12.875h2.5ZM213.555 233.25v-17.797h2.406v17.797ZM163.791 269.25l-9.515-15.156.062 1.234.063 2.11v11.812h-2.14v-17.797h2.796l9.625 15.266c-.105-1.657-.156-2.852-.156-3.594v-11.672h2.172v17.797ZM193.999 260.172c0 1.836-.36 3.437-1.079 4.812-.71 1.375-1.726 2.434-3.046 3.172-1.313.73-2.825 1.094-4.532 1.094h-6.656v-17.797h5.875c3.02 0 5.348.758 6.984 2.266 1.633 1.511 2.454 3.664 2.454 6.453Zm-2.422 0c0-2.207-.606-3.89-1.813-5.047-1.21-1.156-2.96-1.734-5.25-1.734h-3.422v13.921h3.969c1.3 0 2.445-.285 3.438-.859.988-.57 1.75-1.394 2.28-2.469.532-1.07.798-2.343.798-3.812ZM168.506 300.344c0 1.636-.648 2.906-1.937 3.812-1.282.899-3.086 1.344-5.407 1.344-4.343 0-6.859-1.504-7.546-4.516l2.343-.468c.27 1.074.844 1.859 1.72 2.359.874.5 2.062.75 3.562.75 1.562 0 2.765-.266 3.609-.797.844-.539 1.266-1.328 1.266-2.36 0-.581-.137-1.054-.407-1.421-.261-.363-.632-.66-1.11-.89a8.014 8.014 0 0 0-1.718-.595l-2.203-.515c-1.406-.313-2.476-.625-3.203-.938-.73-.312-1.309-.66-1.734-1.047a4.009 4.009 0 0 1-.97-1.343c-.218-.508-.327-1.098-.327-1.766 0-1.52.582-2.691 1.75-3.516 1.164-.832 2.836-1.25 5.015-1.25 2.02 0 3.563.313 4.625.938 1.07.617 1.82 1.668 2.25 3.156l-2.375.422c-.261-.945-.757-1.629-1.484-2.047-.73-.426-1.746-.64-3.047-.64-1.418 0-2.5.234-3.25.703-.75.468-1.125 1.172-1.125 2.11 0 .554.145 1.007.438 1.358.289.356.707.657 1.25.907.55.25 1.64.558 3.265.922.551.125 1.098.257 1.64.39.54.125 1.063.281 1.563.469.5.18.961.387 1.39.625.438.242.813.539 1.126.89.32.356.57.774.75 1.25.187.481.281 1.047.281 1.704ZM187.318 305.25h-2.5l-7.265-17.797h2.546l4.922 12.531 1.063 3.141 1.062-3.14 4.891-12.532h2.547ZM203.74 296.266c0-2.883.773-5.118 2.328-6.704 1.55-1.582 3.726-2.375 6.531-2.375 1.969 0 3.566.336 4.797 1 1.226.668 2.176 1.735 2.844 3.204l-2.297.671c-.512-1.007-1.211-1.742-2.094-2.203-.887-.468-1.992-.703-3.312-.703-2.063 0-3.637.625-4.72 1.875-1.085 1.242-1.624 2.985-1.624 5.235 0 2.25.57 4.027 1.719 5.328 1.156 1.304 2.753 1.953 4.796 1.953 1.164 0 2.25-.176 3.25-.531 1.008-.352 1.82-.832 2.438-1.438v-3.203h-5.313v-2.031h7.547v6.14c-.949.961-2.105 1.703-3.468 2.235-1.368.523-2.852.781-4.454.781-1.867 0-3.468-.367-4.812-1.11-1.344-.738-2.375-1.804-3.094-3.203-.71-1.394-1.062-3.035-1.062-4.921Zm0 0" fill="#0b0a07"/>
</svg>
SVG's needs a width and height attributes as well as viewbox attribute to properly display and change the size programmatically, with react and next js, I personally use this tool to format my svgs to use as a component, it will simply convert the SVG markup into a component and you can change the props as you wish. I tested your svg with the tailwind template and it's working. here's the changes to mark up. but you need to properly format the SVG before exporting it as a markup from some tool to remove extra space around the SVG.
<svg aria-hidden="false" viewBox="0 0 290 320" width="100" height="100">
<defs>
<clipPath id="a">
<path d="M146.258 167.793h82.484V318h-82.484Zm0 0"></path>
</clipPath>
</defs>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
<path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
<path d="M105.378 223.545c0 6.332 2.418 11.977 6.45 16.008 4.03 4.148 9.558 6.566 16.007 6.566 6.106 0 11.863-2.418 15.895-6.566 4.031-4.031 6.566-9.676 6.566-16.008V174.94h2.535c6.102 0 11.516-2.418 15.547-6.45 4.031-4.03 6.45-9.445 6.45-15.437 0-6.102-2.419-11.633-6.45-15.664-4.031-4.032-9.445-6.332-15.547-6.332h-2.535v-15.09c0-6.106-2.535-11.863-6.566-15.895-4.032-4.03-9.79-6.562-15.895-6.562-6.449 0-11.976 2.531-16.008 6.562-4.03 4.032-6.449 9.79-6.449 15.895v15.09h-2.074c-6.336 0-11.633 2.3-15.55 6.332a22.42 22.42 0 0 0-6.333 15.664c0 5.992 2.418 11.406 6.332 15.437 3.918 4.032 9.215 6.45 15.551 6.45h2.074Zm-1.5-67.148c-1.957 0-3.453-1.614-3.453-3.457 0-2.188 1.496-3.458 3.453-3.458h20.387v-33.515c0-1.957 1.266-3.453 3.457-3.453 1.84 0 3.453 1.496 3.453 3.453v33.515h21.309c1.957 0 3.457 1.27 3.457 3.458 0 1.843-1.5 3.457-3.457 3.457h-21.309v66.918c0 1.84-1.613 3.453-3.453 3.453-2.191 0-3.457-1.614-3.457-3.453v-66.918ZM237.372 246.12c13.359 0 26.836-2.536 36.738-8.18 9.906-5.645 16.473-14.512 16.473-27.41 0-9.333-3.457-16.704-8.871-22.231-5.41-5.527-12.782-9.559-20.614-12.438 1.266.114 2.418.23 3.801.23 4.95 0 10.25-1.151 14.395-4.148 4.148-2.996 7.14-7.832 7.14-15.203 0-8.867-5.758-15.894-14.625-20.617-8.87-4.723-21.078-7.14-33.98-7.14-11.516 0-20.27 2.535-27.067 6.566-6.793 4.031-11.402 9.328-14.394 14.742-2.996 5.527-4.262 11.172-4.262 15.664 0 13.707 6.91 23.149 15.777 29.14-.691-.116-1.382-.23-1.957-.23h-1.957c-6.105 0-10.71 2.301-13.82 5.758-3.113 3.457-4.61 8.063-4.61 12.668 0 8.754 3.458 15.203 8.868 20.043 5.414 4.836 12.672 8.063 20.387 10.02 7.718 1.957 15.664 2.765 22.578 2.765Zm.23-19.122c-7.832-.46-12.902-1.035-17.394-2.418-4.493-1.265-8.407-3.226-14.395-6.797-1.27-.804-1.73-1.84-1.73-2.879 0-1.382 1.039-2.535 2.879-2.535 1.152 0 2.535.461 4.148 1.27 1.496.922 3.453 1.843 5.875 2.879 4.605 2.074 11.055 4.144 20.617 4.144 8.29 0 15.086-1.265 19.695-3.57 4.606-2.188 7.254-5.067 7.254-8.637 0-3.226-1.265-5.988-3.914-8.176-5.183-4.379-13.363-7.488-22.46-10.484-4.493-1.496-8.755-3.11-12.669-5.066-7.832-3.801-13.707-8.754-13.707-16.93 0-4.149 1.383-9.215 5.645-13.016 4.144-3.8 11.172-6.68 22.574-6.68 3.57 0 6.91.344 10.25.919 6.45 1.27 11.633 3.113 14.629 5.183 1.496 1.04 2.188 2.074 2.188 2.88 0 1.73-1.383 2.882-3.34 2.882-1.614 0-2.996-.23-4.149-.809a54.023 54.023 0 0 1-4.144-1.726c-3.227-1.266-7.371-2.418-14.86-2.418-8.175 0-13.59 1.265-17.16 3.453-3.57 2.191-4.953 5.414-4.953 9.101 0 2.88 1.266 5.41 3.914 7.372 5.184 4.144 13.246 7.37 22.461 10.593 4.492 1.73 8.754 3.57 12.668 5.645 7.719 4.148 13.594 9.558 13.594 17.508 0 11.863-11.75 18.312-33.516 18.312Zm0 0" fill="#155e75"></path>
<g clip-path="url(#a)">
<path fill="#fff" d="M146.258 167.793h82.789v150.062h-82.79Zm0 0"></path>
</g>
<path d="M168.592 181.422v15.828h-2.406v-15.828h-6.11v-1.969h14.626v1.969ZM197.78 197.25l-2.03-5.203h-8.11l-2.047 5.203h-2.5l7.266-17.797h2.734l7.156 17.797Zm-6.077-15.969-.125.344c-.211.7-.524 1.594-.938 2.687l-2.266 5.86h6.657l-2.282-5.875a26.774 26.774 0 0 1-.718-1.969ZM210.436 197.25v-17.797h2.407v17.797ZM158.998 233.25v-17.797h2.407v15.828h8.984v1.969ZM198.086 233.25h-2.875l-3.078-11.297c-.211-.707-.508-1.973-.891-3.797a220.61 220.61 0 0 1-.563 2.438c-.148.656-1.293 4.875-3.437 12.656h-2.875l-5.25-17.797h2.516l3.203 11.313c.375 1.406.722 2.859 1.047 4.359.195-.926.425-1.938.687-3.031.27-1.094 1.441-5.305 3.516-12.64h2.312l3.094 11.077a127.65 127.65 0 0 1 1.11 4.594l.109-.438c.226-.968.41-1.753.547-2.359.144-.613 1.332-4.906 3.562-12.875h2.5ZM213.555 233.25v-17.797h2.406v17.797ZM163.791 269.25l-9.515-15.156.062 1.234.063 2.11v11.812h-2.14v-17.797h2.796l9.625 15.266c-.105-1.657-.156-2.852-.156-3.594v-11.672h2.172v17.797ZM193.999 260.172c0 1.836-.36 3.437-1.079 4.812-.71 1.375-1.726 2.434-3.046 3.172-1.313.73-2.825 1.094-4.532 1.094h-6.656v-17.797h5.875c3.02 0 5.348.758 6.984 2.266 1.633 1.511 2.454 3.664 2.454 6.453Zm-2.422 0c0-2.207-.606-3.89-1.813-5.047-1.21-1.156-2.96-1.734-5.25-1.734h-3.422v13.921h3.969c1.3 0 2.445-.285 3.438-.859.988-.57 1.75-1.394 2.28-2.469.532-1.07.798-2.343.798-3.812ZM168.506 300.344c0 1.636-.648 2.906-1.937 3.812-1.282.899-3.086 1.344-5.407 1.344-4.343 0-6.859-1.504-7.546-4.516l2.343-.468c.27 1.074.844 1.859 1.72 2.359.874.5 2.062.75 3.562.75 1.562 0 2.765-.266 3.609-.797.844-.539 1.266-1.328 1.266-2.36 0-.581-.137-1.054-.407-1.421-.261-.363-.632-.66-1.11-.89a8.014 8.014 0 0 0-1.718-.595l-2.203-.515c-1.406-.313-2.476-.625-3.203-.938-.73-.312-1.309-.66-1.734-1.047a4.009 4.009 0 0 1-.97-1.343c-.218-.508-.327-1.098-.327-1.766 0-1.52.582-2.691 1.75-3.516 1.164-.832 2.836-1.25 5.015-1.25 2.02 0 3.563.313 4.625.938 1.07.617 1.82 1.668 2.25 3.156l-2.375.422c-.261-.945-.757-1.629-1.484-2.047-.73-.426-1.746-.64-3.047-.64-1.418 0-2.5.234-3.25.703-.75.468-1.125 1.172-1.125 2.11 0 .554.145 1.007.438 1.358.289.356.707.657 1.25.907.55.25 1.64.558 3.265.922.551.125 1.098.257 1.64.39.54.125 1.063.281 1.563.469.5.18.961.387 1.39.625.438.242.813.539 1.126.89.32.356.57.774.75 1.25.187.481.281 1.047.281 1.704ZM187.318 305.25h-2.5l-7.265-17.797h2.546l4.922 12.531 1.063 3.141 1.062-3.14 4.891-12.532h2.547ZM203.74 296.266c0-2.883.773-5.118 2.328-6.704 1.55-1.582 3.726-2.375 6.531-2.375 1.969 0 3.566.336 4.797 1 1.226.668 2.176 1.735 2.844 3.204l-2.297.671c-.512-1.007-1.211-1.742-2.094-2.203-.887-.468-1.992-.703-3.312-.703-2.063 0-3.637.625-4.72 1.875-1.085 1.242-1.624 2.985-1.624 5.235 0 2.25.57 4.027 1.719 5.328 1.156 1.304 2.753 1.953 4.796 1.953 1.164 0 2.25-.176 3.25-.531 1.008-.352 1.82-.832 2.438-1.438v-3.203h-5.313v-2.031h7.547v6.14c-.949.961-2.105 1.703-3.468 2.235-1.368.523-2.852.781-4.454.781-1.867 0-3.468-.367-4.812-1.11-1.344-.738-2.375-1.804-3.094-3.203-.71-1.394-1.062-3.035-1.062-4.921Zm0 0" fill="#0b0a07"></path>
</svg>
you can resize the SVG by just passing width and height to the SVG.
But my preferred way of using svgs in react and next js is like this. I'm using typescript with react or next, this is an example of how my icons or logo svgs look like
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
import { FC } from 'react';
interface Props {
color?: string;
size?: number;
}
const BackIcon: FC<Props> = ({ size, color }) => {
return (
<Svg width={size ?? 8} height={size ?? 16} viewBox="0 0 8 16" fill="none">
<Path
d="M7 15 1 8l6-7"
stroke={color ?? '#525252'}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
};
export default BackIcon;
this is a icon, so I need the luxury to change the color and size of the icon according to the place I use it, that's why I made it accept the color and size as the props. you can use this as a component in your app like below
<BackIcon size={10} color={'#ddd'} />
and this is another way I prefer my icon components should looks like
import React from 'react'
interface Props {
size?: number | string
color?: string
}
const CloseIcon: React.FC<Props> = ({ size, color }) => {
return (
<svg width={size ?? '100%'} height={size ?? '100%'} fill="none" viewBox="0 0 16 16">
<path
d="M1.25 1.25 8 8m0 0-6.75 6.75M8 8l6.75 6.75M8 8l6.75-6.75"
stroke={color ?? 'currentColor'}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
export default CloseIcon
see the difference here, I used 100% as width and height and currentColor as the default color, with this approach you can pass color and size to the icon itself if you want or you can just wrap it around another element, and style the parent element, so the sizes and color of the parent element will be used in the SVG component. I think this is easy to use in some scenarios. here's how we can use this kind of SVG
<button type="button" className="close-button">
<CloseIcon size={12} />
</button>
style.css
.close-button {
color: 'red';
}
color will be inherited from the icon component with the above implementation and you can do the same for the size.
those are just extra tips, if any one needs to know how to work with svgs in react as components, and as I described above, viewbox attributes plays a huge role when it comes to sizing the svgs, I suggest reading about it little more and try to understand how svgs work. svgs can be tricky sometimes. happy coding!
Your outer viewBox is overriding the base svg which is passed as props.
Try removing that, that might help.
export function Logo(props) {
return (
<svg aria-hidden="true" viewBox="0 0 109 40" {...props}> 👈 This viewBox is overriding your svg which is passed through as prop
<path
...
/>
</svg>
)
}
Try to keep only one viewBox either in outside svg or inside svg, preferably use it in inner svg and dont alter that in your outer svg
export function Logo(props) {
return (
<svg aria-hidden="true" {...props}> 👈 Now this is expected to work
<path
...
/>
</svg>
)
}
It's the viewbox setting.
Use the one from svgomg to replace the one in the template.
I would like to insert an image with this shape. I managed to get an SVG that contains exactly this shape I want.
Do I have to use a relative/absolute position with respect to the SVG?
Or there are other solutions.
<svg width="900" height="837" viewBox="0 0 900 837" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#pattern0)"/>
<path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="black" fill-opacity="0.2"/><path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#paint0_linear_576_15291)" fill-opacity="0.6"/>
<path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#paint1_linear_576_15291)" fill-opacity="0.6"/><svg><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_576_15291" transform="matrix(0.000466395 -0.000495293 0.000425126 0.000543374 -0.310932 0.926322)"/></pattern><linearGradient id="paint0_linear_576_15291" x1="530.055" y1="162.509" x2="458.814" y2="325.989" gradientUnits="userSpaceOnUse"><stop/>
<stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="paint1_linear_576_15291" x1="753.981" y1="675.337" x2="550.33" y2="447.382" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient>
i don't know how to do this. Can you help me ?
Or there are other solutions. Thank you so much
You could use this inverted SVG and mask-image as shown here:
https://www.w3schools.com/css/css3_masking.asp
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 631 580" style="enable-background:new 0 0 631 580;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FBAE18;}
</style>
<path class="st0" d="M6.05,0C-6.6,62.76,2.39,143.47,16.51,213.5c20.32,100.76,50.82,179.77,95.43,241.9
c44.58,62.9,121.34,111.21,210.94,122.07c89.97,11.24,193.56-14.97,283.18-77.81c8.46-5.93,16.79-12.19,24.95-18.73V0H6.05z"/>
</svg>
I have a svg image and want it to change color on hover. But it doesn't see colors. Can't get why... I watched and read many tutorials,however none of it helped. Mayve the problem it svg image, it is written incorrectly? Here is my code
svg{
max-width: 100%;
max-height: 150px;
margin:0 auto;
display: table;
}
svg:hover{
fill:orange
}
<a href="">
<svg width="132" height="133" viewBox="0 0 302 133" xmlns="http://www.w3.org/2000/svg" class="">
<g filter="url(#filter0_d)">
<path d="M65.9365 126.497C33.8292 126.793 5.95769 100.729 6.00005 66.583C6.04241 32.9873 32.4737 6.45774 66.0635 6.50005C99.5686 6.54236 126.042 32.9873 126 66.7523C126 100.729 98.2132 126.835 65.9365 126.497ZM26.7131 31.8026C26.8825 31.591 27.3908 31.4641 26.9672 31.1256C26.586 30.8294 26.5013 31.4218 26.2471 31.5487C26.12 31.591 26.0353 31.6757 25.993 31.8026C24.3834 33.3681 23.9598 33.2835 22.4349 30.9564C22.0113 31.4218 21.5454 31.8449 20.9524 32.5219C22.6891 32.5642 23.2821 33.9182 24.2139 34.7221C25.2305 35.6107 26.3318 36.4146 26.9248 37.8532C27.4331 37.2185 27.8567 36.7531 28.3227 36.203C25.4423 35.1029 25.0187 34.2144 26.2471 32.3103C26.4165 32.0988 26.5436 31.9718 26.7131 31.8026ZM23.1126 98.2747C24.0445 100.475 21.8843 100.179 20.9524 101.025C21.3336 101.533 21.7148 102.083 22.0537 102.506C23.2397 100.56 25.2305 99.5863 26.9672 98.4862C28.3227 97.64 28.3227 97.0899 27.179 96.1168C26.7978 97.1323 25.8235 97.5977 25.0611 98.2747C24.2139 99.0363 23.9174 98.4862 23.4939 97.9362C22.9856 97.0899 21.6725 96.2437 22.1808 95.3975C22.7738 94.4666 23.8751 93.578 25.3576 93.4511C24.5104 93.028 24.5952 91.9279 23.748 91.5471C23.4515 92.9857 19.5546 96.1591 17.6061 96.4553C17.9873 97.0476 18.3686 97.5977 18.7498 98.1477C20.6559 95.736 20.91 95.6936 22.6043 97.8516C22.8161 97.9785 22.9856 98.1054 23.1126 98.2747ZM76.653 120.996C76.5683 120.827 76.5683 120.573 76.3141 120.7C76.2294 120.742 76.3141 121.039 76.3565 121.25C77.4155 122.519 78.432 122.054 79.3639 121.123C80.2958 120.192 79.9993 119.177 79.1945 118.331C78.7285 117.865 78.0085 117.569 77.4155 117.23C76.4836 116.723 75.2552 116.257 76.0176 114.903C76.6954 113.719 77.7543 114.226 78.6438 114.946C78.8133 114.226 78.898 113.507 77.9661 113.422C76.7801 113.338 75.6788 113.761 75.1281 114.819C74.5775 115.919 74.9163 117.019 75.8906 117.823C76.3565 118.204 76.9919 118.415 77.5425 118.711C78.305 119.092 79.2792 119.473 78.8556 120.488C78.432 121.462 77.4578 121.335 76.653 120.996ZM111.895 36.2877C112.064 36.5838 112.149 36.9223 112.403 37.1762C112.7 37.4724 111.937 37.9801 112.657 38.1071C112.827 38.1494 113.038 37.9801 113.208 37.8532C113.716 37.4724 113.293 37.1339 113.081 36.8377C112.869 36.4992 112.572 36.203 112.318 35.9069C112.107 35.1876 111.641 34.6375 111.386 34.3836C109.396 36.33 107.235 37.7686 104.524 38.8264C105.965 39.5457 105.711 41.8728 107.913 41.9575C107.617 40.8997 105.541 40.5612 106.769 39.3341C107.49 38.6148 108.887 36.7108 109.692 39.5457C109.819 39.9688 110.243 39.7149 110.539 39.5034C110.793 39.2918 110.751 39.2072 110.582 38.911C109.48 37.0493 109.65 36.7531 111.895 36.2877ZM116.469 90.5739C117.359 90.1085 117.317 89.1776 117.401 88.3737C117.655 86.1311 116.173 84.3964 113.674 83.8886C112.064 83.5501 110.073 84.7772 109.396 86.5966C108.591 88.7545 109.438 90.8701 111.471 91.9279C113.42 92.9011 115.241 92.4356 116.469 90.6162V90.5739ZM114.267 63.5366C116.046 65.4829 118.46 65.7791 120.282 64.2136C121.807 62.8596 122.018 59.94 120.663 58.2899C119.35 56.6397 116.596 56.3435 114.817 57.6552C113.038 59.0092 112.784 61.3787 114.267 63.5366ZM52.0431 20.3784C54.0763 18.7282 54.3728 16.2741 52.8055 14.3701C51.4924 12.7622 48.6968 12.593 46.8754 13.9893C45.1811 15.3009 44.9269 18.2205 46.4095 19.9976C47.9344 21.817 50.0522 21.9439 52.0431 20.3784ZM34.2104 20.2514C32.6855 21.9439 32.4314 23.7633 33.6598 25.4981C34.7611 27.0213 36.1589 27.9099 38.1497 27.2752C40.0134 26.6828 41.1147 25.4135 41.2418 23.4671C41.3689 21.69 40.6064 20.0822 38.9121 19.3206C37.2178 18.559 35.5235 18.8128 34.2104 20.2514ZM22.3502 66.6253C22.2231 90.1085 40.9453 110.334 66.0212 110.334C91.0547 110.334 109.65 90.1085 109.735 66.583C109.819 42.4652 89.9534 23.1286 66.7413 22.7902C42.0466 22.4093 21.969 42.846 22.3502 66.6253ZM104.059 99.4171C106.473 99.3325 108.506 100.602 111.048 100.644C109.014 98.4016 107.235 96.4553 105.456 94.5089C104.694 95.1436 104.059 95.6513 105.753 96.3283C106.812 96.7514 107.617 97.7669 108.549 98.4862C108.421 98.6555 108.252 98.8247 108.125 98.994C106.346 98.5709 104.567 98.1477 102.661 97.7246C102.957 99.671 104.313 101.025 104.482 103.056C103.211 102.21 102.195 101.533 101.178 100.813C100.755 100.517 100.458 100.433 100.077 100.856C99.8228 101.152 99.6533 101.448 100.077 101.702C102.195 103.014 104.355 104.325 106.981 105.933C105.88 103.437 105.033 101.533 104.059 99.4171ZM112.445 77.4149C115.368 78.3457 118.164 78.0496 120.62 79.2343C120.578 78.4727 121.256 77.5841 119.519 77.7957C118.164 77.9649 116.681 77.4572 114.775 77.161C117.359 75.3839 119.519 73.903 121.849 72.2951C119.138 71.1527 116.3 71.8297 113.928 70.3065C113.801 70.8565 113.716 71.3643 113.589 71.9566C115.538 71.9143 117.359 71.999 119.307 72.6336C118.037 73.4799 116.978 74.1569 115.961 74.8762C114.902 75.5955 113.843 76.3571 112.445 77.4149ZM49.3745 120.7C48.9933 119.473 49.0357 118.161 49.9675 117.78C51.0265 117.315 52.3819 118.034 53.3138 118.627C54.2033 119.177 53.2715 120.235 52.9749 120.954C52.8055 121.419 52.509 121.631 53.102 121.842C53.695 122.054 53.9915 121.927 54.2457 121.165C54.9658 118.923 55.2623 116.511 56.533 114.438C55.7282 114.226 55.0928 114.057 54.4151 113.845C54.4575 114.099 54.4151 114.226 54.4575 114.311C54.8811 115.58 54.6269 117.188 53.7374 117.696C53.0173 118.119 51.5348 117.273 50.3911 116.934C49.8405 116.765 50.0099 116.342 50.1793 115.919C50.4335 115.199 50.6876 114.48 50.8571 113.719C50.9418 113.422 51.7466 113.507 51.2806 113.126C50.8147 112.745 50.1793 112.449 49.5016 112.661C48.7815 112.872 49.544 113.168 49.5016 113.422C49.0357 115.75 48.6968 118.119 47.3413 120.192C47.892 120.277 48.5274 120.446 49.3745 120.7ZM87.7508 17.6704C87.7508 15.3432 85.7599 13.4815 83.3879 13.5238C81.27 13.6085 79.1945 15.851 79.2792 18.0512C79.3639 20.2091 81.3124 22.0285 83.6421 21.9862C85.9717 21.9862 87.7084 20.1668 87.7508 17.6704ZM18.0297 75.0454C17.4367 76.6533 15.9542 76.5263 15.3611 76.0609C14.3022 75.257 15.7 74.7069 16.1659 74.1569C17.0555 73.0991 18.1568 72.2105 17.5214 70.3065C16.9284 71.2373 16.7166 72.2105 15.9542 72.6759C15.2764 73.0991 15.0646 74.2415 13.7939 73.903C10.7018 73.1414 9.93933 73.9453 10.4476 76.9918C10.5323 77.5841 10.5747 78.1765 10.6171 78.515C13.2432 77.6688 15.8694 77.2879 18.7074 77.5418C18.4533 76.6956 18.2838 75.9763 18.0297 75.0454ZM22.6467 41.5343C23.7904 42.8883 22.8161 43.9461 22.0113 44.7924C20.8677 46.0617 19.3428 46.1887 17.7755 45.4694C16.5472 44.877 15.7 44.0308 15.9542 42.5075C16.2083 40.8574 16.9284 39.6303 19.0886 39.6726C18.072 38.7841 17.4367 38.1494 16.4624 39.5034C14.5563 42.2113 14.7258 45.0039 17.0131 46.4425C19.131 47.7965 21.7995 47.0772 23.0703 44.6654C23.6209 43.6923 25.0187 42.296 22.6467 41.5343ZM113.716 52.3239C111.556 51.4353 110.836 49.7006 111.641 47.9235C112.445 46.104 114.775 45.0886 116.385 45.8079C117.359 46.231 117.74 47.2042 118.037 48.135C118.333 49.0236 118.121 49.9121 117.232 50.716C119.35 50.7584 119.138 49.5313 118.884 48.4312C118.206 45.6809 116.173 44.0731 114.013 44.5385C111.429 45.0886 109.904 47.1195 110.539 49.6159C110.921 51.0545 110.963 53.1701 113.716 52.3239ZM85.9294 117.357C86.1835 118.838 86.7765 119.134 88.2167 118.542C91.2241 117.315 92.4949 115.369 91.6477 113.042C90.7158 110.545 88.3438 109.487 85.7176 110.587C84.4892 111.138 82.7949 111.645 84.0233 113.719C84.6586 111.518 86.2682 110.672 88.3438 111.307C89.911 111.814 91.2665 114.311 90.7158 115.707C90.0381 117.569 87.8355 118.331 85.9294 117.357ZM29.2122 109.487C30.1864 110.672 31.4148 111.518 32.982 111.095C34.7187 110.672 35.9047 109.445 36.3283 107.71C36.7519 105.933 35.4388 103.86 33.575 102.717C31.796 101.617 31.4995 103.479 30.61 104.114C30.3135 104.325 30.017 104.537 29.6781 104.748C30.2288 105.214 30.5253 105.891 31.2877 106.018C31.2877 104.706 32.0925 103.564 33.0244 103.437C33.9563 103.31 34.8458 104.452 35.0576 105.51C35.3964 107.16 35.0152 108.641 33.5327 109.784C31.8807 111.095 30.6523 110.122 29.2122 109.487ZM17.0131 84.1848C16.9707 84.9041 15.2341 84.0155 16.0812 85.2426C16.9284 86.512 16.3777 86.9351 15.2764 87.3582C13.6668 87.9929 13.8786 86.8504 13.8786 85.9619C13.8786 85.4118 13.5821 85.4118 13.2009 85.4542C12.735 85.4965 12.6502 85.7926 12.8197 86.1735C13.328 87.3159 13.7939 88.416 14.2175 89.4315C16.4624 87.739 18.9616 87.0197 21.4607 86.3004C20.1899 82.7462 20.1899 82.7462 18.7498 83.0847C19.724 83.4655 20.4864 84.3117 20.0629 85.0733C19.6393 85.835 18.4533 86.3004 17.5214 86.0888C16.6319 85.9619 16.886 85.031 17.0131 84.1848ZM13.328 51.4353C12.7773 51.2238 12.269 50.6314 11.8454 51.0968C11.2101 51.8162 11.1254 52.747 11.3371 53.6779C11.5066 54.4395 12.0149 54.8626 12.7773 54.9895C13.921 55.1588 14.7681 54.6087 15.6576 53.9741C16.5472 53.3817 17.6061 52.6201 18.3686 53.9741C19.0886 55.328 17.945 55.8358 16.7166 56.2166C17.479 56.809 18.1568 57.0205 18.6227 56.3012C19.3004 55.2857 19.4275 54.1433 18.7074 53.1278C18.1568 52.3239 17.3096 51.9008 16.3354 52.2393C15.5729 52.5355 14.8528 53.0432 14.1328 53.4663C13.4127 53.8894 12.5232 54.5664 11.9725 53.5509C11.4219 52.5355 12.0996 51.7738 13.328 51.4353ZM95.1634 19.0244C94.0197 21.5208 92.4949 23.6364 90.8005 25.6674C91.9442 26.5136 91.8595 26.429 92.7914 25.1596C93.2149 24.5673 93.1302 23.3402 94.528 23.5518C95.2058 23.6364 95.3752 25.4558 96.18 24.1441C96.5612 23.5518 95.2058 23.3825 94.7822 22.9171C94.6975 22.8325 94.6127 22.7055 94.4857 22.6209C95.9258 20.3784 96.3918 20.2091 97.366 21.4785C97.8319 22.0708 97.8319 22.0708 98.552 21.3092C97.4507 20.5899 96.3494 19.8283 95.1634 19.0244ZM64.2421 16.6126C63.6491 18.1358 62.8443 18.2628 61.9548 18.1781C60.9382 18.0512 61.2347 17.078 61.1077 16.4857C60.8535 15.174 60.6417 13.82 60.8111 12.5083C61.0653 10.6043 60.1334 10.8159 59.2016 11.0697C59.6675 13.6931 60.1758 16.2741 59.8793 18.9398C63.395 19.1513 64.1151 18.8975 64.2421 16.6126ZM39.8016 116.807C41.2842 114.438 42.1313 111.899 44.2492 109.995C43.5291 109.868 43.1903 109.064 42.3855 109.233C41.8772 111.222 39.5899 115.03 38.3615 115.834C38.8698 116.215 39.3357 116.511 39.8016 116.807ZM30.7794 33.7066C31.203 33.2412 31.6689 32.6911 32.0925 32.2257C29.3392 31.2949 28.0262 28.7984 25.8659 27.2329C25.4423 27.5291 24.934 27.9522 24.7646 28.2907C26.9672 29.9409 29.0004 31.5064 30.7794 33.7066ZM100.162 111.18C98.0437 109.403 96.6459 107.245 95.3752 104.875C94.8245 105.256 94.2739 105.637 93.7232 105.975C95.7564 107.076 96.773 109.149 98.0014 110.926C98.8485 112.111 99.3568 112.195 100.162 111.18ZM14.7681 64.1712C14.7681 63.2827 14.2598 62.7749 13.5398 62.6903C12.7773 62.6057 12.269 62.9865 12.1419 63.8751C12.0572 64.8482 12.5655 65.356 13.3703 65.3983C14.1328 65.3983 14.6834 64.9329 14.7681 64.1712ZM103.804 29.8562C103.804 28.9254 103.338 28.3753 102.576 28.3753C101.771 28.4176 101.136 28.9677 101.221 29.8562C101.263 30.6602 101.898 31.1256 102.618 31.0833C103.296 31.1256 103.889 30.6602 103.804 29.8562ZM72.629 16.1472C73.1373 16.1049 73.7303 15.6817 73.6032 14.8355C73.4762 14.1162 73.0102 13.5238 72.1631 13.5661C71.3159 13.6085 70.9347 14.2431 70.9347 15.0048C70.9347 15.8087 71.443 16.2318 72.629 16.1472ZM65.64 117.992C65.174 117.95 64.6657 118.288 64.6657 119.177C64.6657 119.938 64.9199 120.573 65.8094 120.573C66.6142 120.573 67.1225 120.023 67.2496 119.346C67.3766 118.5 66.8683 118.077 65.64 117.992ZM29.0004 109.318C28.8733 108.472 28.5768 107.668 28.7039 106.737C26.5013 107.922 28.0261 108.599 29.0004 109.318Z" fill="#0C1E34"/>
<path d="M71.8668 66.6679C74.9589 64.1715 77.2462 66.0332 79.2794 67.6834C83.2187 70.8568 84.913 75.2572 85.506 80.1231C85.9296 83.635 85.972 87.1469 85.8025 90.6588C85.7178 92.3089 86.8615 93.4937 87.2427 95.0592C74.4083 95.0592 61.6585 95.0592 48.6123 95.0592C50.9843 92.1397 50.349 88.8394 50.349 85.666C50.3913 72.0415 50.3913 58.4594 50.3066 44.8349C50.3066 42.8039 50.942 42.2962 52.7634 42.5078C54.0765 42.6347 55.4319 42.6347 56.7874 42.5078C58.1005 42.3808 58.4393 42.8463 58.4393 44.1579C58.3546 48.9392 58.397 53.7627 58.397 58.544C58.397 68.9104 58.4393 79.2768 58.3546 89.6433C58.3546 91.1665 58.5664 91.8858 60.3454 91.8012C63.8611 91.6319 63.8611 91.7589 63.8611 88.247C63.8611 83.508 63.9035 78.8114 63.8188 74.0725C63.8188 72.8031 64.1153 72.38 65.4707 72.38C71.3161 72.2954 71.3161 72.2531 71.3161 77.9652C71.3161 82.0694 71.3585 86.1314 71.2738 90.2356C71.2738 91.4204 71.6126 91.8012 72.7987 91.8012C77.8392 91.8858 77.7545 91.9281 77.8393 87.0199C77.8816 83.5504 77.7969 80.1231 77.331 76.6958C76.865 72.7185 75.3401 69.1643 71.8668 66.6679Z" fill="#0C1E34"/>
<path d="M48.104 36.8379C55.3896 36.8379 62.6328 36.7533 69.8336 36.8802C72.0786 36.9649 74.2388 37.8111 76.1449 39.0805C80.4654 41.9577 82.4139 46.1466 81.9903 51.1394C81.5244 56.8938 78.1781 60.8711 72.8834 62.9867C69.6642 64.2984 66.1485 64.2984 62.7175 64.2561C61.3197 64.2561 61.4044 63.4098 61.362 62.4367C61.2773 61.2096 61.955 61.2942 62.8022 61.2942C68.4358 61.2096 72.0786 58.8825 73.7305 54.3974C74.7895 51.5202 74.5777 51.1394 71.6126 51.1394C69.7912 51.1394 67.9275 51.1394 66.1061 51.1394C65.0895 51.1394 63.8611 51.6048 63.9035 49.6585C63.9458 47.839 65.0472 48.2622 66.0214 48.2622C68.2664 48.2198 70.5537 48.2198 72.7986 48.2622C74.1541 48.3045 74.2812 47.8814 73.8576 46.6543C72.4598 42.677 69.1559 40.1806 65.0048 40.1383C60.8537 40.1383 56.7027 40.1383 52.5092 40.1383C49.2477 40.1806 49.2477 40.1806 48.104 36.8379Z" fill="#0C1E34"/>
<path d="M34.1679 20.2938C34.4221 20.8862 34.7186 20.4208 34.9727 20.3362C37.3024 19.363 39.6321 20.4631 40.1404 22.9172C40.3945 24.0596 40.3945 25.202 39.2085 25.9213C38.0225 26.683 36.8365 26.6406 35.6928 25.7944C33.8714 24.4404 33.4478 22.9172 34.3374 20.8862C34.4644 20.59 34.5915 20.3785 34.1679 20.2938C34.2103 20.2515 34.1679 20.2938 34.1679 20.2938Z" fill="#0C1E34"/>
<path d="M80.5498 18.0087C80.6769 15.8084 81.9899 14.3275 83.8537 14.4121C85.4633 14.4545 86.6069 15.7661 86.5222 17.5009C86.4375 19.6588 85.0397 21.3936 83.4301 21.3513C81.7782 21.2667 80.4651 19.7434 80.5498 18.0087Z" fill="#0C1E34"/>
<path d="M52.0431 20.3362C51.2806 19.7862 50.7724 20.7594 50.0946 20.717C48.6968 20.6324 47.6802 19.9131 47.1296 18.7284C46.5366 17.5437 46.0706 16.2743 47.0025 15.0049C48.358 13.1432 50.8571 13.4394 52.0854 15.5973C53.0173 17.2052 52.2972 18.7707 52.0431 20.3362C52.0431 20.3786 52.0431 20.3362 52.0431 20.3362Z" fill="#0C1E34"/>
<path d="M11.9302 76.9495C11.0406 77.0764 10.8712 76.6533 10.9559 76.1032C11.083 74.9185 11.8454 74.4954 12.9467 74.4954C13.921 74.4954 14.4716 74.9608 14.2598 75.8917C13.9633 77.288 12.4385 76.2725 11.9302 76.9495Z" fill="#0C1E34"/>
<path d="M114.267 63.537C115.071 63.1139 114.309 62.7331 114.182 62.3946C113.547 60.5329 114.478 58.8404 116.639 58.1634C118.545 57.571 120.281 58.4173 120.832 60.1521C121.171 61.2522 120.747 62.1407 120.07 62.8177C118.884 64.0024 117.316 64.0024 115.749 63.7909C115.241 63.7063 114.944 62.7331 114.267 63.537C114.267 63.4947 114.267 63.537 114.267 63.537Z" fill="#0C1E34"/>
<path d="M116.512 90.5315C115.198 90.4892 114.097 91.4624 112.657 90.9969C110.709 90.3622 109.438 88.9236 109.819 87.4427C110.285 85.581 112.106 84.7348 114.14 85.4117C116.639 86.258 117.274 87.4427 116.512 89.6006C116.427 89.8545 115.791 90.2353 116.469 90.5738L116.512 90.5315Z" fill="#0C1E34"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0.5" width="132" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</a>
Your CSS rule is only setting the fill colour for the <svg> element. The child <path> elements have their own fill attributes that override that colour.
One way to fix it, is to change the fule to:
svg:hover path{
fill:orange
}
So that you are changing the fill of the <path> elements on hover.
This exact solution may not work for every SVG though. You may need to tweak it for other ones.
svg{
max-width: 100%;
max-height: 150px;
margin:0 auto;
display: table;
}
svg:hover path{
fill:orange
}
<a href="">
<svg width="132" height="133" viewBox="0 0 302 133" xmlns="http://www.w3.org/2000/svg" class="">
<g filter="url(#filter0_d)">
<path d="M65.9365 126.497C33.8292 126.793 5.95769 100.729 6.00005 66.583C6.04241 32.9873 32.4737 6.45774 66.0635 6.50005C99.5686 6.54236 126.042 32.9873 126 66.7523C126 100.729 98.2132 126.835 65.9365 126.497ZM26.7131 31.8026C26.8825 31.591 27.3908 31.4641 26.9672 31.1256C26.586 30.8294 26.5013 31.4218 26.2471 31.5487C26.12 31.591 26.0353 31.6757 25.993 31.8026C24.3834 33.3681 23.9598 33.2835 22.4349 30.9564C22.0113 31.4218 21.5454 31.8449 20.9524 32.5219C22.6891 32.5642 23.2821 33.9182 24.2139 34.7221C25.2305 35.6107 26.3318 36.4146 26.9248 37.8532C27.4331 37.2185 27.8567 36.7531 28.3227 36.203C25.4423 35.1029 25.0187 34.2144 26.2471 32.3103C26.4165 32.0988 26.5436 31.9718 26.7131 31.8026ZM23.1126 98.2747C24.0445 100.475 21.8843 100.179 20.9524 101.025C21.3336 101.533 21.7148 102.083 22.0537 102.506C23.2397 100.56 25.2305 99.5863 26.9672 98.4862C28.3227 97.64 28.3227 97.0899 27.179 96.1168C26.7978 97.1323 25.8235 97.5977 25.0611 98.2747C24.2139 99.0363 23.9174 98.4862 23.4939 97.9362C22.9856 97.0899 21.6725 96.2437 22.1808 95.3975C22.7738 94.4666 23.8751 93.578 25.3576 93.4511C24.5104 93.028 24.5952 91.9279 23.748 91.5471C23.4515 92.9857 19.5546 96.1591 17.6061 96.4553C17.9873 97.0476 18.3686 97.5977 18.7498 98.1477C20.6559 95.736 20.91 95.6936 22.6043 97.8516C22.8161 97.9785 22.9856 98.1054 23.1126 98.2747ZM76.653 120.996C76.5683 120.827 76.5683 120.573 76.3141 120.7C76.2294 120.742 76.3141 121.039 76.3565 121.25C77.4155 122.519 78.432 122.054 79.3639 121.123C80.2958 120.192 79.9993 119.177 79.1945 118.331C78.7285 117.865 78.0085 117.569 77.4155 117.23C76.4836 116.723 75.2552 116.257 76.0176 114.903C76.6954 113.719 77.7543 114.226 78.6438 114.946C78.8133 114.226 78.898 113.507 77.9661 113.422C76.7801 113.338 75.6788 113.761 75.1281 114.819C74.5775 115.919 74.9163 117.019 75.8906 117.823C76.3565 118.204 76.9919 118.415 77.5425 118.711C78.305 119.092 79.2792 119.473 78.8556 120.488C78.432 121.462 77.4578 121.335 76.653 120.996ZM111.895 36.2877C112.064 36.5838 112.149 36.9223 112.403 37.1762C112.7 37.4724 111.937 37.9801 112.657 38.1071C112.827 38.1494 113.038 37.9801 113.208 37.8532C113.716 37.4724 113.293 37.1339 113.081 36.8377C112.869 36.4992 112.572 36.203 112.318 35.9069C112.107 35.1876 111.641 34.6375 111.386 34.3836C109.396 36.33 107.235 37.7686 104.524 38.8264C105.965 39.5457 105.711 41.8728 107.913 41.9575C107.617 40.8997 105.541 40.5612 106.769 39.3341C107.49 38.6148 108.887 36.7108 109.692 39.5457C109.819 39.9688 110.243 39.7149 110.539 39.5034C110.793 39.2918 110.751 39.2072 110.582 38.911C109.48 37.0493 109.65 36.7531 111.895 36.2877ZM116.469 90.5739C117.359 90.1085 117.317 89.1776 117.401 88.3737C117.655 86.1311 116.173 84.3964 113.674 83.8886C112.064 83.5501 110.073 84.7772 109.396 86.5966C108.591 88.7545 109.438 90.8701 111.471 91.9279C113.42 92.9011 115.241 92.4356 116.469 90.6162V90.5739ZM114.267 63.5366C116.046 65.4829 118.46 65.7791 120.282 64.2136C121.807 62.8596 122.018 59.94 120.663 58.2899C119.35 56.6397 116.596 56.3435 114.817 57.6552C113.038 59.0092 112.784 61.3787 114.267 63.5366ZM52.0431 20.3784C54.0763 18.7282 54.3728 16.2741 52.8055 14.3701C51.4924 12.7622 48.6968 12.593 46.8754 13.9893C45.1811 15.3009 44.9269 18.2205 46.4095 19.9976C47.9344 21.817 50.0522 21.9439 52.0431 20.3784ZM34.2104 20.2514C32.6855 21.9439 32.4314 23.7633 33.6598 25.4981C34.7611 27.0213 36.1589 27.9099 38.1497 27.2752C40.0134 26.6828 41.1147 25.4135 41.2418 23.4671C41.3689 21.69 40.6064 20.0822 38.9121 19.3206C37.2178 18.559 35.5235 18.8128 34.2104 20.2514ZM22.3502 66.6253C22.2231 90.1085 40.9453 110.334 66.0212 110.334C91.0547 110.334 109.65 90.1085 109.735 66.583C109.819 42.4652 89.9534 23.1286 66.7413 22.7902C42.0466 22.4093 21.969 42.846 22.3502 66.6253ZM104.059 99.4171C106.473 99.3325 108.506 100.602 111.048 100.644C109.014 98.4016 107.235 96.4553 105.456 94.5089C104.694 95.1436 104.059 95.6513 105.753 96.3283C106.812 96.7514 107.617 97.7669 108.549 98.4862C108.421 98.6555 108.252 98.8247 108.125 98.994C106.346 98.5709 104.567 98.1477 102.661 97.7246C102.957 99.671 104.313 101.025 104.482 103.056C103.211 102.21 102.195 101.533 101.178 100.813C100.755 100.517 100.458 100.433 100.077 100.856C99.8228 101.152 99.6533 101.448 100.077 101.702C102.195 103.014 104.355 104.325 106.981 105.933C105.88 103.437 105.033 101.533 104.059 99.4171ZM112.445 77.4149C115.368 78.3457 118.164 78.0496 120.62 79.2343C120.578 78.4727 121.256 77.5841 119.519 77.7957C118.164 77.9649 116.681 77.4572 114.775 77.161C117.359 75.3839 119.519 73.903 121.849 72.2951C119.138 71.1527 116.3 71.8297 113.928 70.3065C113.801 70.8565 113.716 71.3643 113.589 71.9566C115.538 71.9143 117.359 71.999 119.307 72.6336C118.037 73.4799 116.978 74.1569 115.961 74.8762C114.902 75.5955 113.843 76.3571 112.445 77.4149ZM49.3745 120.7C48.9933 119.473 49.0357 118.161 49.9675 117.78C51.0265 117.315 52.3819 118.034 53.3138 118.627C54.2033 119.177 53.2715 120.235 52.9749 120.954C52.8055 121.419 52.509 121.631 53.102 121.842C53.695 122.054 53.9915 121.927 54.2457 121.165C54.9658 118.923 55.2623 116.511 56.533 114.438C55.7282 114.226 55.0928 114.057 54.4151 113.845C54.4575 114.099 54.4151 114.226 54.4575 114.311C54.8811 115.58 54.6269 117.188 53.7374 117.696C53.0173 118.119 51.5348 117.273 50.3911 116.934C49.8405 116.765 50.0099 116.342 50.1793 115.919C50.4335 115.199 50.6876 114.48 50.8571 113.719C50.9418 113.422 51.7466 113.507 51.2806 113.126C50.8147 112.745 50.1793 112.449 49.5016 112.661C48.7815 112.872 49.544 113.168 49.5016 113.422C49.0357 115.75 48.6968 118.119 47.3413 120.192C47.892 120.277 48.5274 120.446 49.3745 120.7ZM87.7508 17.6704C87.7508 15.3432 85.7599 13.4815 83.3879 13.5238C81.27 13.6085 79.1945 15.851 79.2792 18.0512C79.3639 20.2091 81.3124 22.0285 83.6421 21.9862C85.9717 21.9862 87.7084 20.1668 87.7508 17.6704ZM18.0297 75.0454C17.4367 76.6533 15.9542 76.5263 15.3611 76.0609C14.3022 75.257 15.7 74.7069 16.1659 74.1569C17.0555 73.0991 18.1568 72.2105 17.5214 70.3065C16.9284 71.2373 16.7166 72.2105 15.9542 72.6759C15.2764 73.0991 15.0646 74.2415 13.7939 73.903C10.7018 73.1414 9.93933 73.9453 10.4476 76.9918C10.5323 77.5841 10.5747 78.1765 10.6171 78.515C13.2432 77.6688 15.8694 77.2879 18.7074 77.5418C18.4533 76.6956 18.2838 75.9763 18.0297 75.0454ZM22.6467 41.5343C23.7904 42.8883 22.8161 43.9461 22.0113 44.7924C20.8677 46.0617 19.3428 46.1887 17.7755 45.4694C16.5472 44.877 15.7 44.0308 15.9542 42.5075C16.2083 40.8574 16.9284 39.6303 19.0886 39.6726C18.072 38.7841 17.4367 38.1494 16.4624 39.5034C14.5563 42.2113 14.7258 45.0039 17.0131 46.4425C19.131 47.7965 21.7995 47.0772 23.0703 44.6654C23.6209 43.6923 25.0187 42.296 22.6467 41.5343ZM113.716 52.3239C111.556 51.4353 110.836 49.7006 111.641 47.9235C112.445 46.104 114.775 45.0886 116.385 45.8079C117.359 46.231 117.74 47.2042 118.037 48.135C118.333 49.0236 118.121 49.9121 117.232 50.716C119.35 50.7584 119.138 49.5313 118.884 48.4312C118.206 45.6809 116.173 44.0731 114.013 44.5385C111.429 45.0886 109.904 47.1195 110.539 49.6159C110.921 51.0545 110.963 53.1701 113.716 52.3239ZM85.9294 117.357C86.1835 118.838 86.7765 119.134 88.2167 118.542C91.2241 117.315 92.4949 115.369 91.6477 113.042C90.7158 110.545 88.3438 109.487 85.7176 110.587C84.4892 111.138 82.7949 111.645 84.0233 113.719C84.6586 111.518 86.2682 110.672 88.3438 111.307C89.911 111.814 91.2665 114.311 90.7158 115.707C90.0381 117.569 87.8355 118.331 85.9294 117.357ZM29.2122 109.487C30.1864 110.672 31.4148 111.518 32.982 111.095C34.7187 110.672 35.9047 109.445 36.3283 107.71C36.7519 105.933 35.4388 103.86 33.575 102.717C31.796 101.617 31.4995 103.479 30.61 104.114C30.3135 104.325 30.017 104.537 29.6781 104.748C30.2288 105.214 30.5253 105.891 31.2877 106.018C31.2877 104.706 32.0925 103.564 33.0244 103.437C33.9563 103.31 34.8458 104.452 35.0576 105.51C35.3964 107.16 35.0152 108.641 33.5327 109.784C31.8807 111.095 30.6523 110.122 29.2122 109.487ZM17.0131 84.1848C16.9707 84.9041 15.2341 84.0155 16.0812 85.2426C16.9284 86.512 16.3777 86.9351 15.2764 87.3582C13.6668 87.9929 13.8786 86.8504 13.8786 85.9619C13.8786 85.4118 13.5821 85.4118 13.2009 85.4542C12.735 85.4965 12.6502 85.7926 12.8197 86.1735C13.328 87.3159 13.7939 88.416 14.2175 89.4315C16.4624 87.739 18.9616 87.0197 21.4607 86.3004C20.1899 82.7462 20.1899 82.7462 18.7498 83.0847C19.724 83.4655 20.4864 84.3117 20.0629 85.0733C19.6393 85.835 18.4533 86.3004 17.5214 86.0888C16.6319 85.9619 16.886 85.031 17.0131 84.1848ZM13.328 51.4353C12.7773 51.2238 12.269 50.6314 11.8454 51.0968C11.2101 51.8162 11.1254 52.747 11.3371 53.6779C11.5066 54.4395 12.0149 54.8626 12.7773 54.9895C13.921 55.1588 14.7681 54.6087 15.6576 53.9741C16.5472 53.3817 17.6061 52.6201 18.3686 53.9741C19.0886 55.328 17.945 55.8358 16.7166 56.2166C17.479 56.809 18.1568 57.0205 18.6227 56.3012C19.3004 55.2857 19.4275 54.1433 18.7074 53.1278C18.1568 52.3239 17.3096 51.9008 16.3354 52.2393C15.5729 52.5355 14.8528 53.0432 14.1328 53.4663C13.4127 53.8894 12.5232 54.5664 11.9725 53.5509C11.4219 52.5355 12.0996 51.7738 13.328 51.4353ZM95.1634 19.0244C94.0197 21.5208 92.4949 23.6364 90.8005 25.6674C91.9442 26.5136 91.8595 26.429 92.7914 25.1596C93.2149 24.5673 93.1302 23.3402 94.528 23.5518C95.2058 23.6364 95.3752 25.4558 96.18 24.1441C96.5612 23.5518 95.2058 23.3825 94.7822 22.9171C94.6975 22.8325 94.6127 22.7055 94.4857 22.6209C95.9258 20.3784 96.3918 20.2091 97.366 21.4785C97.8319 22.0708 97.8319 22.0708 98.552 21.3092C97.4507 20.5899 96.3494 19.8283 95.1634 19.0244ZM64.2421 16.6126C63.6491 18.1358 62.8443 18.2628 61.9548 18.1781C60.9382 18.0512 61.2347 17.078 61.1077 16.4857C60.8535 15.174 60.6417 13.82 60.8111 12.5083C61.0653 10.6043 60.1334 10.8159 59.2016 11.0697C59.6675 13.6931 60.1758 16.2741 59.8793 18.9398C63.395 19.1513 64.1151 18.8975 64.2421 16.6126ZM39.8016 116.807C41.2842 114.438 42.1313 111.899 44.2492 109.995C43.5291 109.868 43.1903 109.064 42.3855 109.233C41.8772 111.222 39.5899 115.03 38.3615 115.834C38.8698 116.215 39.3357 116.511 39.8016 116.807ZM30.7794 33.7066C31.203 33.2412 31.6689 32.6911 32.0925 32.2257C29.3392 31.2949 28.0262 28.7984 25.8659 27.2329C25.4423 27.5291 24.934 27.9522 24.7646 28.2907C26.9672 29.9409 29.0004 31.5064 30.7794 33.7066ZM100.162 111.18C98.0437 109.403 96.6459 107.245 95.3752 104.875C94.8245 105.256 94.2739 105.637 93.7232 105.975C95.7564 107.076 96.773 109.149 98.0014 110.926C98.8485 112.111 99.3568 112.195 100.162 111.18ZM14.7681 64.1712C14.7681 63.2827 14.2598 62.7749 13.5398 62.6903C12.7773 62.6057 12.269 62.9865 12.1419 63.8751C12.0572 64.8482 12.5655 65.356 13.3703 65.3983C14.1328 65.3983 14.6834 64.9329 14.7681 64.1712ZM103.804 29.8562C103.804 28.9254 103.338 28.3753 102.576 28.3753C101.771 28.4176 101.136 28.9677 101.221 29.8562C101.263 30.6602 101.898 31.1256 102.618 31.0833C103.296 31.1256 103.889 30.6602 103.804 29.8562ZM72.629 16.1472C73.1373 16.1049 73.7303 15.6817 73.6032 14.8355C73.4762 14.1162 73.0102 13.5238 72.1631 13.5661C71.3159 13.6085 70.9347 14.2431 70.9347 15.0048C70.9347 15.8087 71.443 16.2318 72.629 16.1472ZM65.64 117.992C65.174 117.95 64.6657 118.288 64.6657 119.177C64.6657 119.938 64.9199 120.573 65.8094 120.573C66.6142 120.573 67.1225 120.023 67.2496 119.346C67.3766 118.5 66.8683 118.077 65.64 117.992ZM29.0004 109.318C28.8733 108.472 28.5768 107.668 28.7039 106.737C26.5013 107.922 28.0261 108.599 29.0004 109.318Z" fill="#0C1E34"/>
<path d="M71.8668 66.6679C74.9589 64.1715 77.2462 66.0332 79.2794 67.6834C83.2187 70.8568 84.913 75.2572 85.506 80.1231C85.9296 83.635 85.972 87.1469 85.8025 90.6588C85.7178 92.3089 86.8615 93.4937 87.2427 95.0592C74.4083 95.0592 61.6585 95.0592 48.6123 95.0592C50.9843 92.1397 50.349 88.8394 50.349 85.666C50.3913 72.0415 50.3913 58.4594 50.3066 44.8349C50.3066 42.8039 50.942 42.2962 52.7634 42.5078C54.0765 42.6347 55.4319 42.6347 56.7874 42.5078C58.1005 42.3808 58.4393 42.8463 58.4393 44.1579C58.3546 48.9392 58.397 53.7627 58.397 58.544C58.397 68.9104 58.4393 79.2768 58.3546 89.6433C58.3546 91.1665 58.5664 91.8858 60.3454 91.8012C63.8611 91.6319 63.8611 91.7589 63.8611 88.247C63.8611 83.508 63.9035 78.8114 63.8188 74.0725C63.8188 72.8031 64.1153 72.38 65.4707 72.38C71.3161 72.2954 71.3161 72.2531 71.3161 77.9652C71.3161 82.0694 71.3585 86.1314 71.2738 90.2356C71.2738 91.4204 71.6126 91.8012 72.7987 91.8012C77.8392 91.8858 77.7545 91.9281 77.8393 87.0199C77.8816 83.5504 77.7969 80.1231 77.331 76.6958C76.865 72.7185 75.3401 69.1643 71.8668 66.6679Z" fill="#0C1E34"/>
<path d="M48.104 36.8379C55.3896 36.8379 62.6328 36.7533 69.8336 36.8802C72.0786 36.9649 74.2388 37.8111 76.1449 39.0805C80.4654 41.9577 82.4139 46.1466 81.9903 51.1394C81.5244 56.8938 78.1781 60.8711 72.8834 62.9867C69.6642 64.2984 66.1485 64.2984 62.7175 64.2561C61.3197 64.2561 61.4044 63.4098 61.362 62.4367C61.2773 61.2096 61.955 61.2942 62.8022 61.2942C68.4358 61.2096 72.0786 58.8825 73.7305 54.3974C74.7895 51.5202 74.5777 51.1394 71.6126 51.1394C69.7912 51.1394 67.9275 51.1394 66.1061 51.1394C65.0895 51.1394 63.8611 51.6048 63.9035 49.6585C63.9458 47.839 65.0472 48.2622 66.0214 48.2622C68.2664 48.2198 70.5537 48.2198 72.7986 48.2622C74.1541 48.3045 74.2812 47.8814 73.8576 46.6543C72.4598 42.677 69.1559 40.1806 65.0048 40.1383C60.8537 40.1383 56.7027 40.1383 52.5092 40.1383C49.2477 40.1806 49.2477 40.1806 48.104 36.8379Z" fill="#0C1E34"/>
<path d="M34.1679 20.2938C34.4221 20.8862 34.7186 20.4208 34.9727 20.3362C37.3024 19.363 39.6321 20.4631 40.1404 22.9172C40.3945 24.0596 40.3945 25.202 39.2085 25.9213C38.0225 26.683 36.8365 26.6406 35.6928 25.7944C33.8714 24.4404 33.4478 22.9172 34.3374 20.8862C34.4644 20.59 34.5915 20.3785 34.1679 20.2938C34.2103 20.2515 34.1679 20.2938 34.1679 20.2938Z" fill="#0C1E34"/>
<path d="M80.5498 18.0087C80.6769 15.8084 81.9899 14.3275 83.8537 14.4121C85.4633 14.4545 86.6069 15.7661 86.5222 17.5009C86.4375 19.6588 85.0397 21.3936 83.4301 21.3513C81.7782 21.2667 80.4651 19.7434 80.5498 18.0087Z" fill="#0C1E34"/>
<path d="M52.0431 20.3362C51.2806 19.7862 50.7724 20.7594 50.0946 20.717C48.6968 20.6324 47.6802 19.9131 47.1296 18.7284C46.5366 17.5437 46.0706 16.2743 47.0025 15.0049C48.358 13.1432 50.8571 13.4394 52.0854 15.5973C53.0173 17.2052 52.2972 18.7707 52.0431 20.3362C52.0431 20.3786 52.0431 20.3362 52.0431 20.3362Z" fill="#0C1E34"/>
<path d="M11.9302 76.9495C11.0406 77.0764 10.8712 76.6533 10.9559 76.1032C11.083 74.9185 11.8454 74.4954 12.9467 74.4954C13.921 74.4954 14.4716 74.9608 14.2598 75.8917C13.9633 77.288 12.4385 76.2725 11.9302 76.9495Z" fill="#0C1E34"/>
<path d="M114.267 63.537C115.071 63.1139 114.309 62.7331 114.182 62.3946C113.547 60.5329 114.478 58.8404 116.639 58.1634C118.545 57.571 120.281 58.4173 120.832 60.1521C121.171 61.2522 120.747 62.1407 120.07 62.8177C118.884 64.0024 117.316 64.0024 115.749 63.7909C115.241 63.7063 114.944 62.7331 114.267 63.537C114.267 63.4947 114.267 63.537 114.267 63.537Z" fill="#0C1E34"/>
<path d="M116.512 90.5315C115.198 90.4892 114.097 91.4624 112.657 90.9969C110.709 90.3622 109.438 88.9236 109.819 87.4427C110.285 85.581 112.106 84.7348 114.14 85.4117C116.639 86.258 117.274 87.4427 116.512 89.6006C116.427 89.8545 115.791 90.2353 116.469 90.5738L116.512 90.5315Z" fill="#0C1E34"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0.5" width="132" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</a>
I'm using an SVG image mask on this but as you can see, the image is getting some opacity added for some reason
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584">
<defs>
<mask id="image-mask">
<path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#F71A3A"/>
<path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#F71A3A"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image>
</svg>
What am I missing?
The color of the mask need to be white (#fff). The fill coloration control the opacity.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584">
<defs>
<mask id="image-mask">
<path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#fff"/>
<path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#fff"/>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image>
</svg>
For more detail refer to the specification: https://drafts.fxtf.org/css-masking-1/#MaskValues. The color value is used in combination with mask-type and the default configuration is luminance so we use black to define the invisible part and white the visible one
I have added drop shadow in some countries of jVectorMap.
Filter used for drop shadow:
<svg>
<defs>
<filter id="f2" x="0" y="0">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="4"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<filter id = "i1">
<feOffset result="offOut" in="SourceGraphic" dx = "0" dy = "0"/>
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="4"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
</svg>
Example: CodePen
It looks fine for big countries. But the problem is for small countries. For small countries, the shadow is creating a square shape around the border (zoom in for countries like Kosovo and Aland in the example).
How can I remove that square shape to make it looks alike other big countries?
Expand your filter region and you'll be fine:
<filter id = "i1" x="-40%" y="-40%" width="180%" height="180%">
does it for me.