react-native-svg
react-native-svg copied to clipboard
Render svg from svg xml
SVG:
<svg style="vertical-align: 0;" xmlns="http://www.w3.org/2000/svg" width="1.633ex" height="1.545ex" role="img" focusable="false" viewBox="0 -683 722 683" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-N-211D" d="M17 665Q17 672 28 683H221Q415 681 439 677Q461 673 481 667T516 654T544 639T566 623T584 607T597 592T607 578T614 565T618 554L621 548Q626 530 626 497Q626 447 613 419Q578 348 473 326L455 321Q462 310 473 292T517 226T578 141T637 72T686 35Q705 30 705 16Q705 7 693 -1H510Q503 6 404 159L306 310H268V183Q270 67 271 59Q274 42 291 38Q295 37 319 35Q344 35 353 28Q362 17 353 3L346 -1H28Q16 5 16 16Q16 35 55 35Q96 38 101 52Q106 60 106 341T101 632Q95 645 55 648Q17 648 17 665ZM241 35Q238 42 237 45T235 78T233 163T233 337V621L237 635L244 648H133Q136 641 137 638T139 603T141 517T141 341Q141 131 140 89T134 37Q133 36 133 35H241ZM457 496Q457 540 449 570T425 615T400 634T377 643Q374 643 339 648Q300 648 281 635Q271 628 270 610T268 481V346H284Q327 346 375 352Q421 364 439 392T457 496ZM492 537T492 496T488 427T478 389T469 371T464 361Q464 360 465 360Q469 360 497 370Q593 400 593 495Q593 592 477 630L457 637L461 626Q474 611 488 561Q492 537 492 496ZM464 243Q411 317 410 317Q404 317 401 315Q384 315 370 312H346L526 35H619L606 50Q553 109 464 243Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="211D" xlink:href="#MJX-1-TEX-N-211D"></use></g></g></g></svg>
Problem Description: The SVG does not render properly when used in a React Native application. The issue manifests as a failure to display the SVG correctly, and the root cause is currently unknown.
Steps to Reproduce: Include the provided SVG in a React Native project. Attempt to render the SVG using React Native SVG components. Observe that the SVG does not display as expected. Expected Behavior: The SVG should render correctly in the React Native application, displaying the intended graphical representation.
What I Know: If I remove the ex units (e.g., change 1.633ex to 1633 and 1.545ex to 1544), and modify the transform scale from scale(1,-1) to scale(1,1), the SVG appears but upside down.
Note: I appreciate any assistance or insights.
I'm facing the same problem here.
My SVG should be:
But it's displaying:
It's and SVG through an URL.
Hello @oliuradu @gabrielbarth, Can you add the example to reproduce that issue, because the SVG that @oliuradu provided worked well for me.