The first thing you’ll need to know is how to prepare your drawing for Illustrator. Vectorize artwork in Illustrator using image trace.Your favorite text editor (For cleanup.Procreate (version 4.2.5 as of this writing).Inkscape has a bitmap tracing tool that is similar to Illustrator’s image trace. Note 3: Readers looking for a free alternative to Illustrator may want to look at Inkscape. I won’t cover instructions here, but it is an excellent vector program on the iPad at a similar price point as Procreate. Note 2: If you would rather keep your workflow on the iPad, consider using Affinity Designer. JPGs or PNGs will work for basic interactivity. Note 1: SVGs are really only needed in instances when you want to modify individual layers inside the artwork. I started with a raster drawing from Procreate that did not allow for easy animation and manipulation (left) and ended with an organized SVG with easy to manage shapes (right). Is not required, but it will make integration with code much easier and help optimize web performance. It contains a step by step guide on how to convert raster drawings from Procreate into vectors using Illustrator’s image trace. This post covers everything from planning your design to cleaning up your exported SVG with a code editor. The app store has more details on some of the specific tools Procreate offers. Plus, compared to most desktop applications, Procreate is inexpensive. As a digital drawing tool it has an advantage over traditional pen and paper when it comes to producing cleaner artwork and providing easy synchronization with desktopĪpps. Tools like customizable brushes, drawing guides, and personalized color palettes. It allows designers to 1) interact with their artwork using touch or 2) use the Apple pencil for extra precision. Procreate is one of the most powerful and intuitive illustration apps on the market designed for the iPad. For this post, I will be focusing on how to convertĪnd prepare raster drawings from Procreate using Adobe Illustrator. Both SVGs and D3 support interactivity and animation, offering a ton of flexibility to create unique interactive applications.įuture posts will describe how to load and modify external SVGs with D3, but there are important steps that need to be taken during the design process to create manageable, web friendly vector graphics.

If you are interested in making beautiful custom data visualizations for the web, D3 and SVGs work great together.

Png to svg adobe illustrator