0
226
Views<svg> & <img> show different glyphs; <svg> has artifact
In React, I'm trying to display an SVG & be able to dynamically change it's color, but there is a weird "artifacting" going on when used as an component, even with the exact same code.
Left is <img src="checkmark.svg"/>, Right is as an <svg> React component
Code:
checkmark.svg
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 24L13.5 28.5L31 11" stroke="#626262" stroke-width="3" stroke-linecap="round"/>
</svg>
CheckmarkSVG.jsx
const StepCheckmarkSVG = () => {
return (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 24L13.5 28.5L31 11" stroke="#626262" stroke-width="3" stroke-linecap="round" />
</svg>
);
};
It's literally the same SVG code. Why are they displaying differently?
·
Juan Pablo Isaza
1 answers
Answer question0
Looks good to me:
const element =
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 24L13.5 28.5L31 11" stroke="#626262" stroke-width="3" stroke-linecap="round" />
</svg>;
ReactDOM.render(element,document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
·
Juan Pablo Isaza
Report
Answer question