Discuss Scratch
- Discussion Forums
- » Show and Tell
- » Manipulating and exporting vector graphics (SVG) in Scratch
![[RSS Feed]](//cdn.scratch.mit.edu/scratchr2/static/__ff7229f036c458728e45c39b0751aa44__//djangobb_forum/img/feed-icon-small.png "[RSS Feed]")
![[RSS Feed]](http://cdn.scratch.mit.edu/scratchr2/static/__ff7229f036c458728e45c39b0751aa44__//djangobb_forum/img/feed-icon-small.png "[RSS Feed]"){kind=icon}
- kriblo
-
Scratcher
100+ posts
Manipulating and exporting vector graphics (SVG) in Scratch
I had some questions regarding manipulating vector graphics, SVG, in my recent projects:
In this thread I will try and answer some of these questions. First of all vector graphics (scalable vector graphics, SVG) are basically descriptions of what should be drawn, saved to a text file with defined XML structure and terminology. The text file usually have the file extension SVG.
The SVG in a Scratch project can be accessed in several ways, e.g. by exporting a vector costume or by saving an entire project to your computer and looking inside the compressed folder. A saved Scratch project is really a ZIP archive with the file extension SB3.
For the AniMan project I generated SVG line code to draw straight lines, then inserted that in a SVG template (see below).
For the ipzy Icon Creator 4.0 project, I saved the project and extracted the relevant SVG from the project folder using javascript. I then converted the SVG to Scratch lists and added the data to the project JSON file. The data need to be escaped (“–>\”) and delimited as list items (\n–>“,”). In the project, the SVG for each icon element (hair, eyes etc.) is inserted in the template presented below.
My first SVG project, the Rotating tetrahedron project, was really created for my own benefit, to generate costumes for an animation, so I didn't have to include the heavy calculations in another project. The procedure is basically the same as for AniMan.
SVG generated in a Scratch project can not be directly used in the project, but can be offered for export by the user, with the limitation that the user need to “See inside” to be able to right click the SVG list and select “Export”.
I hope this answers some questions.
SVG template I've used:
- Save ipzy's icons as vector graphics (SVG)
- AniMan - Animation with vector export (SVG)
- Rotating tetrahedron - with SVG export
In this thread I will try and answer some of these questions. First of all vector graphics (scalable vector graphics, SVG) are basically descriptions of what should be drawn, saved to a text file with defined XML structure and terminology. The text file usually have the file extension SVG.
The SVG in a Scratch project can be accessed in several ways, e.g. by exporting a vector costume or by saving an entire project to your computer and looking inside the compressed folder. A saved Scratch project is really a ZIP archive with the file extension SB3.
For the AniMan project I generated SVG line code to draw straight lines, then inserted that in a SVG template (see below).
For the ipzy Icon Creator 4.0 project, I saved the project and extracted the relevant SVG from the project folder using javascript. I then converted the SVG to Scratch lists and added the data to the project JSON file. The data need to be escaped (“–>\”) and delimited as list items (\n–>“,”). In the project, the SVG for each icon element (hair, eyes etc.) is inserted in the template presented below.
My first SVG project, the Rotating tetrahedron project, was really created for my own benefit, to generate costumes for an animation, so I didn't have to include the heavy calculations in another project. The procedure is basically the same as for AniMan.
SVG generated in a Scratch project can not be directly used in the project, but can be offered for export by the user, with the limitation that the user need to “See inside” to be able to right click the SVG list and select “Export”.
I hope this answers some questions.
SVG template I've used:
<svg version="1.1" baseProfile="full" width="480" height="360" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"> <g data-paper-data="{"isPaintingLayer":true}" fill="none" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"> </g> </svg>
- PutneyCat
-
Scratcher
500+ posts
Manipulating and exporting vector graphics (SVG) in Scratch
Got it, thanks for this!
- SkrafEyeQ
-
Scratcher
1 post
Manipulating and exporting vector graphics (SVG) in Scratch
But i need to export in PNG?
- qwertyman859
-
Scratcher
2 posts
Manipulating and exporting vector graphics (SVG) in Scratch
How would I be able to import vector drawings from one project to another for say like a logo or something?
- Discussion Forums
- » Show and Tell
-
» Manipulating and exporting vector graphics (SVG) in Scratch