Need advice on SVGs for creating custom shapes for react/next
I'll be creating some custom shapes (e.g. custom maps, math/geometry illustrations) for a react app and i remember from somewhere that SVGs might be the best way to handle those.
What would be a good way of going about this for someone new to SVGs in webdev?
The current workflow i have in mind would be to learn figma (i already know photoshop so i guess the learning curve would be a bit less steep).
Then use figma to create the shapes, export them for use in react?
Do i need to use a library? D3 maybe? (although fwik, D3 is used mostly for charts and has a steep learning curve)
2 Replies
Figma is a design tool which can export SVG, not a fully featured SVG toolkit like Adobe Illustrator or Inkscape (which is free).
On the React side you can use
<img src="a.svg"\> , paste the contents of the SVG into a react compoent or use an SVG loader as part of your build.
Further reading: https://blog.logrocket.com/how-to-use-svgs-react/Nedy Udombat
LogRocket Blog
How to use SVGs in React - LogRocket Blog
Learn how to use or render an SVG image on a React webpage, the pros and cons, and using components like and .
thanks!