Skip to main content


RegEx(SVG) => JSX: Adapting Vector Graphics for React

After mocking up a component in a graphics editor, Colten Jackson was about to get to work drawing up the HTML-box-model-layout for a complicated display component for a ReactJS application. But upon opening a text editor, he remembered that the vector graphics editor he used (Inkscape) would export the file as plain XML, and considering the considerable overlap between XML and HTML, he decided to find out what it would take to convert the output of Inkscape (an open source competitor to Adobe Illustrator) into a JSX-friendly react component. With some patience and a few magic spells provided by Vim RegEx, Jackson will demonstrate how Inkscape can be used to design components for React web apps.

Project Members: Colten Jackson

Find the program that fits your life.

Learn about our coding, cybersecurity, and data analytics bootcamps offered on full-time and part-time schedules.