im using Angular 15. I noticed weird thing, when i add svg circle by tag it displays properly, but when i put it as just raw svg it displaying weird. See screenshots.
Icon added by img tag: enter image description here Icon added just by raw svg: enter image description here
Icon code:
<svg id="Group_10215" data-name="Group 10215" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<defs>
<clipPath id="clip-path">
<rect id="Shape_103" data-name="Shape 103" width="20" height="20" rx="10" fill="none" stroke="#140f4b" stroke-width="1.5"/>
</clipPath>
</defs>
<g id="Shape_103-2" data-name="Shape 103" fill="none" stroke="#140f4b" stroke-width="1.5">
<rect width="20" height="20" rx="10" stroke="none"/>
<rect x="0.75" y="0.75" width="18.5" height="18.5" rx="9.25" fill="none"/>
</g>
<g id="Mask_Group_109" data-name="Mask Group 109" clip-path="url(#clip-path)">
<path id="Path_12329" data-name="Path 12329" d="M11,0H0V22H11Z" transform="translate(-1 -1)" fill="#140f4b"/>
</g>
</svg>
Anybody know what going on?
I would like to display circle svg properly by adding raw svg to the html
Like commented you probably have more IDs that are the same and the clip-path then messes up. In general IDs must be unique and then try to avoid using too many of them. You could define the clip-path in a separate SVG element and then let all the other elements that need that clip-path refer to it.
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
style="position:absolute">
<defs>
<clipPath id="clip-path">
<rect width="20" height="20" rx="10" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20">
<g fill="none" stroke="#140f4b" stroke-width="1.5">
<rect width="20" height="20" rx="10" stroke="none"/>
<rect x="0.75" y="0.75" width="18.5" height="18.5"
rx="9.25" fill="none"/>
</g>
<g clip-path="url(#clip-path)">
<path d="M11,0H0V22H11Z" transform="translate(-1 -1)"
fill="#140f4b"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20">
<g fill="none" stroke="#140f4b" stroke-width="1.5">
<rect width="20" height="20" rx="10" stroke="none"/>
<rect x="0.75" y="0.75" width="18.5" height="18.5"
rx="9.25" fill="none"/>
</g>
<g clip-path="url(#clip-path)">
<path d="M11,0H0V22H11Z" transform="translate(-1 -1)"
fill="#140f4b"/>
</g>
</svg>You could also simplify you SVG (and remove all the IDs):
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20">
<path d="M 10 0 a 1 1 0 0 0 0 20 z" fill="#140f4b" />
<circle cx="10" cy="10" r="9.25" stroke="#140f4b"
stroke-width="1.5" fill="none" />
</svg>