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
557 Votes62 Spinoffs3594 Lines
Contest: Olympic Games - Rio 2016 by Mentrasto
53 Votes5 Spinoffs931 Lines
by
1 Line
Coloring Woody by Mentrasto
174 Votes111 Spinoffs841 Lines
Dinner's Dessert by
5 Votes1 Spinoff199 Lines
Alpha Toothless by Jaycubee
64 Votes12 Spinoffs1454 Lines
KA Coat of Arms by WeatherWonders
127 Votes6 Spinoffs2305 Lines
By | 2017-08-17T14:55:04-08: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.

20 Comments

  1. Elite Prøgramming March 8, 2016 at 6:20 pm - Reply

    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!

    • Darryl Yeo March 9, 2016 at 2:50 pm - Reply

      If the “Center Image” option is turned on, the drawing will be centered around the origin, but you can turn it off if you prefer the anchor at the top left. There are plenty of bugs to acknowledge as I mentioned above, but thanks for letting me know!

  2. Sequel Maker @WhatifyNW May 23, 2016 at 1:39 pm - Reply

    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

    • Darryl Yeo May 23, 2016 at 7:38 pm - Reply

      Awesome! I’m glad you could make use of it.

  3. master of beef May 27, 2016 at 8:23 pm - Reply

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

    • Darryl Yeo May 29, 2016 at 4:54 pm - Reply

      My tool specifically converts SVG because it is fundamentally vector-based, which more directly matches the way Processing.js interprets shape commands. PNGs and JPGs are pixel-based; use Bob Lyon’s Imagenator for those.

  4. MPKA June 17, 2016 at 8:52 am - Reply

    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.

    • Darryl Yeo June 19, 2016 at 5:21 pm - Reply

      Hmm, I believe that had something to do with the viewbox attribute. A good feature to add in the future.

  5. Bryan Lu @bryanluisawesome June 21, 2016 at 10:46 pm - Reply

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

    • Darryl Yeo June 22, 2016 at 12:06 pm - Reply

      Do you have a link to the SVG you used?

  6. CherryCo Tony October 8, 2016 at 5:31 pm - Reply

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

    • Darryl Yeo October 9, 2016 at 5:58 pm - Reply

      Have you tried clicking the “Share” button underneath your project on Khan Academy? It’ll generate a <script> element which will add the appropriate <iframe> for you.

      If you want to add the <iframe> markup yourself, just add /embedded to the end of the project URL, like this:
      https://www.khanacademy.org/computer-programming/mathdinosaur-logo/4883852549160960/embedded

      The URL can then go in the src attribute of the <iframe>.

      • CherryCo Tony October 16, 2016 at 4:52 pm - Reply

        Thanks! You really helped me out. And why do you have to write at least 30 characters, especially when you just want to say thanks?

  7. Master Mind October 22, 2016 at 1:48 am - Reply

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

    • Darryl Yeo October 23, 2016 at 4:49 pm - Reply

      Have you tried the “Choose File” button?

  8. @WeatherWonders on KA July 13, 2017 at 6:50 am - Reply

    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 a different line. Copy/pasting the exported ProcessingJS code is finicky as well. Using Ctrl + C sometimes doesn’t copy it.

    • Darryl Yeo August 17, 2017 at 3:05 pm - Reply

      My converter currently doesn’t account for colors defined in the style attribute (e.g. <path style="fill: #fff">). I’d recommend running your SVG through SVGOMG as it will move the definitions to their dedicated color attributes (among lots of other useful optimizations).

  9. Hunter Brown September 26, 2017 at 12:04 pm - Reply

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

    • Darryl Yeo September 27, 2017 at 4:50 pm - Reply

      My converter currently doesn’t account for colors defined in the style attribute (e.g. <path style="fill: #fff">). I’d recommend running your SVG through SVGOMG as it will move the definitions to their dedicated color attributes (among lots of other useful optimizations).

      • Hunter Brown September 28, 2017 at 11:31 am - Reply

        It’s still not reading my colors, I ran it through SVGOMG without changing any of the default parameters. Could I have exported the SVG from Illustrator wrong?

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top