To change the colors of objects, you only need to know two attributes: fill (background color) and stroke (border color). I recommend using something like data-name rather than the id if you have text overlaying objects because the object and the text will be separate elements. Add a click listener to the and identify paths by an attribute on the or tags. It actually converts it into a full React component for you, which is extra nice of its creators.įrom there, you can add whatever you would add to any other component. All you do is upload your SVG file and copy the JSX it spits out. The solution I found was to use this amazing SVG to JSX converter. The main problem is that React uses JSX and, if you take a look at the code in your SVG file, there are a lot of different attributes on the and tags that JSX won’t like. There are a few different packages out there available to accomplish this, but I had a lot of trouble using them. Now that we’ve edited the graphic, the next step is to integrate it into our React app. Here you can create/delete layers (click the blue plus/minus), hide/show layers (click the eye icon), and lock/unlock layers (click the lock icon). On the right-hand side, near the top, is the Layers window.

Inkscape converts whatever you create into this code for you, and it will make a lot more sense once you start digging into the code. If this seems confusing right now, don’t worry. The tags are typically wrapped around a tag where the actual text lives. The tags represent the objects and lines in the graphic. The children of the tags are either tags or tags.

In the graphic I used, the gray background is one layer, the neighborhood outlines are another layer on top of that, and the text is the highest layer. If you’re not familiar with graphic editors, layers are generally used to group related elements of the graphic such as text or similar objects. The entire graphic is wrapped in an tag, and the direct children of that tag are tags, which represent the layers of the graphics. As you can see in the picture above, it provides you with a lot of different tools, but I only used a few to edit an existing graphic.īefore I get into those tools, here’s a quick primer on SVG files. Inkscape is pretty intuitive if you’ve ever used any other brand of graphics or layout editor.

Using inkscape to make svg