❶ Click the blue round buttons to show controls that let you edit the appearance of the rectangle displayed in the middle. ❷ Click the green button to generate SVG code for that rectangle. ❸ Triple-click to select the code, and copy it. ❹ Open up a text editor, paste the code, and save it with the file extension ".SVG". ❺ Open up a Scratch project, and import the SVG file. Or you can use @MonkeyBean2's remix, which allows you to save the SVG file directly in the browser (no text editor needed): https://scratch.mit.edu/projects/622236529/
This is a much-improved version of SVG Generator: https://scratch.mit.edu/projects/484614572/ In that project I worked hard to accomplish something akin to traditional form elements, but the result was nowhere near as usable as I had hoped. So I decided to make a new version from scratch, with a dynamic preview and the option to add rounded corners. ❤️✒️❤️ More SVG Fun ❤️✒️❤️ The Scratch Line Challenge: https://scratch.mit.edu/projects/481705137/ The Scratch Line Challenge Solution: https://scratch.mit.edu/projects/482425637/ Edited SVG Library: https://scratch.mit.edu/projects/484390740/ How To Fix the Bounding Box Bug (Maybe): https://scratch.mit.edu/projects/484627709/ SVG Text Bug Demo:
