Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
SVG not rendering with other graphics
See original GitHub issueExpected Behavior
svg icon should display to the left of the text
Current Behavior
text and other graphics appear, but the SVG does not
Possible Solution
honestly I don’t know. It’s possible I’ve made a mistake and this isn’t a bug. SVGs render normally when I’m not converting them to a texture.
Steps to Reproduce
running in the playground: https://www.pixiplayground.com/#/edit/fRNuBBozMAjOIqTYgnRbj
Environment
Windows 10, edge Version 88.0.705.56 (Official build) (64-bit)
pixi.jsversion: 5.3.7- Running Example: https://www.pixiplayground.com/#/edit/fRNuBBozMAjOIqTYgnRbj
Issue Analytics
- State:
- Created 3 years ago
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Chrome not rendering SVG referenced via <img> element
This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right...
Read more >SVG not rendering with other graphics · Issue #7220 - GitHub
It appears that the issue appears when the svg is run through BaseRenderTexture and RenderTexture. Does this have to do with a loading...
Read more >SVG does not render properly - Graphic Design Stack Exchange
The problem occurs because text elements are rendered incomplete. Rendering text elements means loading a font, apply various operations ( ...
Read more >SVG Images are not rendering texts properly
I have a SVG file with default system font (Segoe UI) but it does not properly rendered when I publish this. I can't...
Read more >Rendering Model — SVG 2
The components of the final rendered representation of an SVG document do not have a one-to-one relationship with the underlying elements in the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
bingo, thanks @bigtimebuddy
Yes, loading any assets is an asynchronous process and the image is not available when you create the RenderTexture. I would suggest that you use
app.loaderto preload your SVG images. Or you can useTexture.fromURL, which returns a Promise when the asset is ready, and you can wait until that’s done.