It’s surprisingly easy. You should give it a shot
Knowing the basics is probably beneficial, but I don’t think my boss would appreciate me doing that instead of focusing on real functionalities, especially since our designer provides them for us. Still, it could be a fun thing to experiment with sometime.
@Rory
Yeah, being able to read and tweak it is definitely useful.
What’s great about SVGs is that you can change the colors of elements based on context.
@Rory
I’ve made dynamic icons that respond to user actions, which was pretty cool—they change shape and everything. Eventually, I switched to an icon library for ease, just replacing icons as needed. Much simpler and way less debugging!
The only time I did manual SVG edits was for my app, declassified.app, where it’s possible to create color themes that sync the maps with the website.
I don’t create them myself, but I tend to edit the code quite a bit, assigning classes from the page’s CSS. This way, I can change the logo’s appearance just by adjusting some values.
One cool aspect of SVG is using real text that can be searched on the page, allowing you to define styles and fonts. I’ve only done that once, though.
One cool aspect of SVG is using text that can be searched on the page and styled.
Plus, since it’s XML, you can programmatically manipulate it. I maintain a library of around 300 maps in SVG format, and every morning, a script checks for updates against a vendor’s database and modifies the SVGs before publishing as PDFs to a public database.
And since it’s XML, you can easily read and write.
Absolutely, regular expressions are lifesavers! 
@Zed
Yeah, same for me. Actually coding an image? No thanks. Editing? Sure. Especially modifying classes to avoid collisions with inline styles.
If I spent time coding an SVG from scratch, my boss would probably not be pleased, especially since I could just get the design in two minutes.
Same reason I won’t create fonts—totally different field.
Don’t get me wrong; I love being creative with tools. But icon sets serve a clear function.
Definitely not. What a waste of time. Just use Flaticon instead.
Keir said:
Definitely not. What a waste of time. Just use Flaticon instead.
Iconify*
Google Material Icons*
“Why not?” Well, we have software that does that task more effectively. I might optimize things myself or run it through SVGOMG, but why would I hand-code SVGs otherwise?
If I’m in the mood to animate something or have a very specific request.
I wouldn’t dream of crafting generic icons or hamburgers from scratch. I maintain a library of preferred icons.
Edit (just to prevent it from getting lost here): I have no clue what this award is about, but it’s my first, so… thank you?
Jesus, have you seen those d attributes? No thanks. 
For instance, check out the one from the SiriusXM logo—absolute nightmare; it could be worse…
<path xmlns="http://www.w3.org/2000/svg" d="M22.0902 6.41803H28.5286V22.628H22.0902V6.41803ZM22.0902 2H28.5286V5.09734H22.0902V2ZM43.3313 2H49.7697V5.09734H43.3313V2ZM43.3313 6.41803H49.7697V22.628H43.3313V6.41803ZM62.5443 6.41803H68.9827V22.628H63.0081V20.246C61.4044 22.4708 59.8243 23.0918 57.1593 23.0918C53.6296 23.0918 51.342 20.9299 51.342 16.2839V6.41803H57.7803V15.1755C57.7803 17.4002 58.5586 18.1156 60.0994 18.1156C61.9547 18.1156 62.5443 16.7242 62.5443 14.2164V6.41803ZM86.5211 17.4317C86.5211 20.8042 83.7383 23.0918 77.7951 23.0918C74.0846 23.0918 69.9968 21.9519 69.6587 17.581H75.7827C75.7827 18.2335 76.0264 18.7288 76.4666 19.0668C76.8675 19.3734 77.4257 19.5621 78.0467 19.5621C79.0372 19.5621 80.0906 19.2555 80.0906 18.1077C80.0906 15.5057 70.154 17.581 70.154 11.2999C70.154 7.15699 74.4541 5.94636 77.8266 5.94636C81.3563 5.94636 85.4992 6.74821 85.8687 11.0483H80.0199C79.957 10.5216 79.7447 10.1521 79.3988 9.86913C79.0608 9.59399 78.597 9.46821 78.1017 9.46821C76.9854 9.46821 76.2779 9.80624 76.2779 10.616C76.2858 12.8879 86.5211 11.3706 86.5211 17.4317ZM20.2035 13.3517C20.6909 14.0985 20.9817 15.0104 20.9817 16.1346C20.9503 20.2853 17.5149 23.0997 10.1253 23.0997C5.50289 23.0997 0.424509 21.6925 0 16.3232V16.056H6.92578L5.39283 20.5762L10.4476 17.0622L15.5024 20.5762L14.1896 16.6927C13.9852 16.2918 13.4585 16.0717 13.4585 16.0717C10.6992 14.5387 0.628902 15.372 0.628902 8.59561C0.628902 3.49364 5.98243 2.00786 10.1803 2.00786C14.5748 2.00786 19.7318 2.99838 20.1956 8.28902V8.49341H12.3972L10.4634 2.80185L8.52948 8.49341H2.27977L5.77017 10.899C6.79214 10.4902 7.88486 10.3094 8.97757 10.1914C10.1489 10.0657 11.3281 10.0421 12.5073 10.1207C13.4978 10.1836 14.4805 10.3251 15.4474 10.5531C16.32 10.7575 17.2083 10.9854 18.0023 11.4178C18.8906 11.9052 19.6689 12.5262 20.2035 13.3517ZM41.1223 5.95422C41.5232 5.95422 41.9556 6.04855 41.9556 6.04855V12.4869C41.9556 12.4869 41.6176 12.2983 40.627 12.2983C37.9935 12.2983 36.665 13.5325 36.665 17.0308V22.6358H30.2266V6.41803H36.0754V9.69619H36.1383C37.0423 7.16486 38.6067 5.95422 41.1223 5.95422ZM125.159 2.46382H136V22.628H129.145V16.905C129.145 14.1299 129.2 11.5593 129.302 9.20092C129.098 10.1679 128.87 11.0798 128.618 11.9445L125.812 22.6201H120.081L117.212 11.9524L116.913 10.8203C116.818 10.4587 116.74 10.1443 116.677 9.85341C116.614 9.5704 116.575 9.41318 116.551 9.37387C116.653 11.6772 116.708 14.1928 116.708 16.905V22.628H109.861V2.46382H120.702L122.447 10.1128L122.974 12.5184C123.202 11.3077 123.367 10.5059 123.469 10.1128L125.159 2.46382ZM101.261 11.8738L109.209 22.6358H100.954L99.7359 20.7963L97.3618 17.1408C96.7172 18.1077 95.8525 19.3184 94.7755 20.7963L93.4391 22.6358H85.6171L93.7771 12.2983L86.4897 2.47168H94.6497L95.8682 4.22474L97.6449 6.82682C97.6842 6.74821 97.9672 6.33942 98.486 5.57688L99.4215 4.21688L100.64 2.46382H108.242L101.261 11.8738Z" fill="white"/>
@Skyler
Yeah, well, those d attributes can look really intimidating when they use all those capital letters.
Absolutely not, what a waste of time. Use an icon pack and adjust values as needed, or if you need something truly unique, design it in Figma and export as SVG.
This isn’t typically done by a web developer. It’s more suited for a designer using Adobe Illustrator.