SVG to Processing.js Converter

Have an SVG graphic you want to include in a Khan Academy Processing.js project? Instantly convert it to Processing.js code with this handy converter. Feature support may be limited.

Updated

Category

Topic

Languages

SVG to Processing.js Converter

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.

Notes

  • 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.
  • Your file won’t be uploaded or stored anywhere – it’s processed locally on your computer using JavaScript.
  • 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!

Featured Projects

Projects by the Khan Academy community featuring converted SVGs. Let me know if you want yours listed!

Avatar-In-A-Box by darrylyeo
536 Votes62 Spinoffs3594 Lines
Contest: Olympic Games - Rio 2016 by Mentrasto
53 Votes5 Spinoffs931 Lines
by
1 Line
Coloring Woody by Mentrasto
170 Votes111 Spinoffs841 Lines
Dinner's Dessert by
5 Votes1 Spinoff199 Lines
Alpha Toothless by Jaycubee
57 Votes11 Spinoffs1454 Lines
KA Coat of Arms by WeatherWonders
118 Votes5 Spinoffs2305 Lines
By | 2017-08-17T14:55:04+00:00 July 4th, 2016|20 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

Leave a Comment

20 Comments on "SVG to Processing.js Converter"

avatar
2000

Elite Prøgramming
Guest
Elite Prøgramming
March 8, 2016 6:20 pm

Neat, but it doesn’t seem to be working 100% perfectly. It generates the image using complex shape commands, but the translation is off, it uses fill(); without any parameters, and uses a noFill(); following every fill(); command. Anyways, great work though!

Sequel Maker @WhatifyNW
Guest
Sequel Maker @WhatifyNW
May 23, 2016 1:39 pm

This is a really good tool!
It requires some skill to use, but ultimately gets the job done.
https://www.khanacademy.org/computer-programming/generous-use-of-dys-svg-tool/5672804432

master of beef
Guest
May 27, 2016 8:23 pm

Is there any way to convert .png/PNG and .jpg/JPG files to Khan pjs?

MPKA
Guest
MPKA
June 17, 2016 8:52 am

strangely when i put the code in (with some slight proportional adjustments because the parameters were too large) drawing was upside-down and backwards i did have center image on and I will try it again with it off and I’m sure I can work around but just wanted to let you know.

Bryan Lu @bryanluisawesome
Guest
Bryan Lu @bryanluisawesome
June 21, 2016 10:46 pm

In the right dark-grey box, the text says “[object Event]”.

CherryCo Tony
Guest
October 8, 2016 5:31 pm

Neat. Do you know how to convert processing.js to html or atleast an embed code for khan academy?

Master Mind
Guest
Master Mind
October 22, 2016 1:48 am

I have a svg image but I can’t copy and paste it

@WeatherWonders on KA
Guest
@WeatherWonders on KA
July 13, 2017 6:50 am
This doesn’t seem to work with SVGs made in Inkscape. I’ve alternate exporting options, which didn’t work at all. This can convert path data from normal Inkscape SVGs fine, but it does not convert the coloring at all. It only gives me a fill(0) and noStroke() at the top. Here’s an example: https://mega.nz/#!DUQk2ajb!FID62ouzXTFXX96vzDaiTSo2UXXQKY28RkYBqkDgPBM (When the page loads just click on the “download through browser” button.) In any case, thanks for making this converter. By the way, the text on this website is very buggy. I can’t select sections of text while writing this, or even move the text cursor to… Read More
Hunter Brown
Guest
Hunter Brown
September 26, 2017 12:04 pm

Mine has all the shape locations and vertices, but it’s all black. Why is this?

wpDiscuz
Go to Top