Choose an SVG file to convert or paste the markup into the text box. You can directly copy and paste the output into a Processing.js project on Khan Academy’s computer programming environment.
- This tool is intended for programmers using the Processing.js environment on Khan Academy. The real Processing.js already supports importing of SVGs.
- This tool does not account for advanced SVG features such as transformations, masks, filters, and gradients.
- Be responsible – don’t use others’ images without permission. It’s always a good idea to disclose the URL of the original file somewhere in your project code.
- Use Processing.js’s transformation functions to scale and position the image. Here’s how to draw the image at half the size and with position (100, 100):
var scaleFactor = 0.5; var x = 100; var y = 100; pushMatrix(); scale(scaleFactor); translate(x, y); /* Image code */ popMatrix();
You can uncheck the “Center graphic around origin” option to position the image by its top left corner as opposed to its center.
- Let others know you used this tool by leaving in the credits. Thanks for your courtesy!
Projects by the Khan Academy community featuring converted SVGs. Let me know if you want yours listed!