Reagan said:
This isn’t typically done by a web developer. It’s more suited for a designer using Adobe Illustrator.
Exactly. Let the designers handle their work.
This is quite ignorant or misleading. Sure, I can code some SVGs, but the examples you’re showing are quite basic. Can you do the same with just a heart? What about a home or info icon?
I usually go for Octicons or Material icons most of the time, and for anything extra, I use Inkscape.
@Wendell
Out of curiosity, I tried hand-coding a heart. It took about 15 minutes—just a couple of circles and a triangle. An actual designed SVG heart would undoubtedly be better.
Here’s the link: https://codepen.io/dangoodspeed/pen/ogvjgGb
@Oak
That’s a lovely heart! Spending 10-30 minutes is a reasonable effort. Communicating with a designer and waiting for the custom design would take longer.
Plus, you can create a JSX component for it and animate it via its inputs, which would add a cool touch.
You can export SVGs directly from Figma these days! It’s much easier to maintain than trying to manually code XML.
Hmm, let me think. Should I draw a shape in 2 minutes using Figma or Illustrator, or spend 20 minutes calculating it in code? Decisions, decisions…
It might be practical to write (or programmatically generate) very simple SVGs by hand.
However, for most SVGs involving a path or long sequences of coordinates, I’d suggest using a library or graphic software.
After all, SVG is primarily a graphics format.
At times, I need something specific, and I generate it using Illustrator.
Not icons. Custom graphics like logos? No way. But I’ll adjust them significantly if needed.
I don’t code my icons, but I do use the ones I create in Illustrator.
I wrote a detailed article on coding SVGs. Even I think it’s often a waste of time. It may be a fun exercise, but it’s impractical. Just use a library.
No, I’m a backend developer.
Writing my own? No way. Why bother? You can just create it in Illustrator and export it as an SVG. If needed, you can clean up any mess from the export.
Not from scratch, but I’ll occasionally edit what I find.
Honestly, I’d prefer not to hand-code SVG icons. Have you seen the code for some of these? It feels like learning a whole new language! I’d much rather use a tool like Figma or Illustrator, and then just export as SVG. It saves so much time and effort. Also, I’m a software engineer, not a graphic designer 
.
Writing my own? Like by hand? Nah.
If I require custom work not available in a library, I develop it in Illustrator, export it as SVG, and then adjust the file to include any specific SVG-related CSS rules (like animations or keyframes).
Nope, I’m not a designer.
I occasionally adjust SVG icons, such as changing colors. It’s super convenient.
I usually have a tool convert them to SVG (like png2svg) if they already exist. It’s especially handy for animations or even for static images since they scale way better than regular formats.