Extension: "SVG" #2005

WAYLIVES · 2025-03-03T08:51:43Z

Extension: "SVG"

With this extension, you can create simple vector images:

Image:

🖼 NEW EXTENSION IMAGES

WAYLIVES · 2025-03-03T08:52:46Z

!format

extensions/WAYLIVES/SVG/1.0.1.js

Brackets-Coder · 2025-03-04T17:20:04Z

@WAYLIVES
I have a question. Are SVG elements rendered as part of the actual scratch stage <canvas> or are they elements overlaying the stage?

WAYLIVES · 2025-03-04T17:23:05Z

@WAYLIVES I have a question. Are SVG elements rendered as part of the actual scratch stage <canvas> or are they elements overlaying the stage?

The fact is that with the help of my extension, you can create a simple SVG code, but this code will not be displayed anywhere, it will be like a variable.

WAYLIVES · 2025-03-04T17:26:51Z

@WAYLIVES I have a question. Are SVG elements rendered as part of the actual scratch stage <canvas> or are they elements overlaying the stage?

But with the help of additional extensions, such as "Skins", "Looks+", you can display them on the stage by inserting, so to speak, a variable with an svg code into a specific cell...

WAYLIVES · 2025-03-04T17:30:18Z

@Brackets-Coder Thank you so much for your help, for your time spent on me. I am very grateful to you!

Brackets-Coder · 2025-03-04T17:50:26Z

@Brackets-Coder Thank you so much for your help, for your time spent on me. I am very grateful to you!

You're very welcome

hammouda101010

i may be tough with this review, but your PR has alot of flaws and boilerplate code

hammouda101010 · 2025-03-05T14:19:38Z

docs/WAYLIVES/SVG.md

bro wth are the docs in russian 😭🙏

hammouda101010 · 2025-03-05T14:20:32Z

extensions/WAYLIVES/SVG/1.0.1.js

+  "use strict";
+
+  if (!Scratch.extensions.unsandboxed) {
+    throw new Error("This example must run unsandboxed");


i think you should put the name of the extension instead

hammouda101010 · 2025-03-05T14:25:12Z

extensions/WAYLIVES/SVG/1.0.1.js

+  class svg {
+    getInfo() {
+      return {
+        id: "svg",


the extension ID and class name should match the ID in the given metadata

hammouda101010 · 2025-03-05T14:32:44Z

extensions/WAYLIVES/SVG/1.0.1.js

+        blocks: [
+          {
+            opcode: "svg",
+            blockType: Scratch.BlockType.REPORTER,
+            text: Scratch.translate(
+              "SVG-frame  //  width: [WIDTH] height: [HEIGHT] elements in svg: [ELEMENTS]"
+            ),
+            arguments: {
+              WIDTH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              HEIGHT: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              ELEMENTS: {
+                type: Scratch.ArgumentType.STRING,
+                defaultValue: "<path ... />",
+              },
+            },
+          },
+
+          "---",
+
+          {
+            opcode: "line",
+            blockType: Scratch.BlockType.REPORTER,
+            text: Scratch.translate(
+              "LINE  //  x1, y1: [XA][YA] x2, y2: [XB][YB] width: [WIDTH] color: [COLOR] opacity: [OPACITY]% dash, gap: [DASH][GAP] linecap: [LINECAP]"
+            ),
+            arguments: {
+              XA: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "4",
+              },
+              YA: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "4",
+              },
+              XB: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "96",
+              },
+              YB: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "96",
+              },
+              WIDTH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "8",
+              },
+              COLOR: {
+                type: Scratch.ArgumentType.COLOR,
+                defaultValue: "#ff0000",
+              },
+              OPACITY: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              DASH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "0",
+              },
+              GAP: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "0",
+              },
+              LINECAP: {
+                type: Scratch.ArgumentType.STRING,
+                menu: "LINECAPmenu",
+              },
+            },
+          },
+
+          {
+            opcode: "rect",
+            blockType: Scratch.BlockType.REPORTER,
+            text: Scratch.translate(
+              "RECT  //  x, y: [X][Y] width: [WIDTH] height: [HEIGHT] radius: [RADIUS] fill color: [FILLCOLOR] fill opacity: [FILLOPACITY]% stroke width: [STROKEWIDTH] stroke color: [STROKECOLOR] stroke opacity: [STROKEOPACITY]% dash, gap: [DASH][GAP] stroke linecap: [LINECAP]"
+            ),
+            arguments: {
+              X: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "4",
+              },
+              Y: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "4",
+              },
+              WIDTH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "92",
+              },
+              HEIGHT: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "92",
+              },
+              RADIUS: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "20",
+              },
+              FILLCOLOR: {
+                type: Scratch.ArgumentType.COLOR,
+                defaultValue: "#ff0000",
+              },
+              FILLOPACITY: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              STROKEWIDTH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "8",
+              },
+              STROKECOLOR: {
+                type: Scratch.ArgumentType.COLOR,
+                defaultValue: "#000000",
+              },
+              STROKEOPACITY: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              DASH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "0",
+              },
+              GAP: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "0",
+              },
+              LINECAP: {
+                type: Scratch.ArgumentType.STRING,
+                menu: "LINECAPmenu",
+              },
+            },
+          },
+
+          {
+            opcode: "ellipse",
+            blockType: Scratch.BlockType.REPORTER,
+            text: Scratch.translate(
+              "ELLIPSE  //  cx, cy: [CX][CY] width: [WIDTH] height: [HEIGHT] fill color: [FILLCOLOR] fill opacity: [FILLOPACITY]% stroke width: [STROKEWIDTH] stroke color: [STROKECOLOR] stroke opacity: [STROKEOPACITY]% dash, gap: [DASH][GAP] stroke linecap: [LINECAP]"
+            ),
+            arguments: {
+              CX: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "50",
+              },
+              CY: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "50",
+              },
+              WIDTH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "92",
+              },
+              HEIGHT: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "92",
+              },
+              FILLCOLOR: {
+                type: Scratch.ArgumentType.COLOR,
+                defaultValue: "#ff0000",
+              },
+              FILLOPACITY: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              STROKEWIDTH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "8",
+              },
+              STROKECOLOR: {
+                type: Scratch.ArgumentType.COLOR,
+                defaultValue: "#000000",
+              },
+              STROKEOPACITY: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "100",
+              },
+              DASH: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "0",
+              },
+              GAP: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "0",
+              },
+              LINECAP: {
+                type: Scratch.ArgumentType.STRING,
+                menu: "LINECAPmenu",
+              },
+            },
+          },
+        ],


the blocks text are really, really bad and aren't following best practices (especialy if you use //, because that's how you would make comments on javascript)

why are there so many arguments bro 💀

the opcodes are too generic and aren't releted to the context of the extension at all.

hammouda101010 · 2025-03-05T14:33:54Z

extensions/WAYLIVES/SVG/1.0.1.js

+    svg(args) {
+      // prettier-ignore
+      return (
+        '<svg width="' + (args["WIDTH"] + ('" height="' + (args["HEIGHT"] + ('" viewBox="' + ("0 0 " + (args["WIDTH"] + (" " + (args["HEIGHT"] + ('" fill="' + ("none" + ('" xmlns="' + ("http://www.w3.org/2000/svg" + ('">' + args["ELEMENTS"]))))))))))))) + "</svg>"
+      );
+    }
+
+    line(args) {
+      // prettier-ignore
+      return (
+        '<line x1="' + (args["XA"] + ('" y1="' + (args["YA"] + ('" x2="' + (args["XB"] + ('" y2="' + (args["YB"] + ('" stroke-width="' + (args["WIDTH"] + ('" stroke="' + (args["COLOR"] + ('" stroke-dasharray="' + (args["DASH"] + (" " + (args["GAP"] + ('" stroke-linecap="' + (args["LINECAP"] + ('" stroke-opacity="' + (args["OPACITY"] / 100 + '"'))))))))))))))))))) + "/>"
+      );
+    }
+
+    rect(args) {
+      // prettier-ignore
+      return (
+        '<rect x="' + (args["X"] + ('" y="' + (args["Y"] + ('" width="' + (args["WIDTH"] + ('" height="' + (args["HEIGHT"] + ('" rx="' + (args["RADIUS"] + ('" fill="' + (args["FILLCOLOR"] + ('" fill-opacity="' + (args["FILLOPACITY"] / 100 + ('" stroke-width="' + (args["STROKEWIDTH"] + ('" stroke="' + (args["STROKECOLOR"] + ('" stroke-opacity="' + (args["STROKEOPACITY"] / 100 + ('" stroke-dasharray="' + (args["DASH"] + (" " + args["GAP"]) + ('" stroke-linecap="' + (args["LINECAP"] + '"'))))))))))))))))))))))) + "/>"
+      );
+    }
+
+    ellipse(args) {
+      // prettier-ignore
+      return (
+        '<ellipse cx="' + (args["CX"] + ('" cy="' + (args["CY"] + ('" rx="' + (args["WIDTH"] / 2 + ('" ry="' + (args["HEIGHT"] / 2 + ('" fill="' + (args["FILLCOLOR"] + ('" fill-opacity="' + (args["FILLOPACITY"] / 100 + ('" stroke-width="' + (args["STROKEWIDTH"] + ('" stroke="' + (args["STROKECOLOR"] + ('" stroke-opacity="' + (args["STROKEOPACITY"] / 100 + ('" stroke-dasharray="' + (args["DASH"] + (" " + args["GAP"]) + ('" stroke-linecap="' + (args["LINECAP"] + '"'))))))))))))))))))))) + "/>"
+      );
+    }
+  }


that is some nasty code out there, it almost looks like Pascal code😭 🙏

images/WAYLIVES/SVG.svg

hammouda101010 · 2025-03-05T14:35:03Z

images/WAYLIVES/Window Settings.svg

but this should not exist because it's in another PR of yours.

WAYLIVES · 2025-03-05T16:40:05Z

@hammouda101010 Thank you, very mutch!

snowboyz0825 · 2025-03-06T19:36:48Z

well this would've been helpful 2 weeks ago lol, I learned how SVGs work and manually edited them to make an isometric cube

WAYLIVES · 2025-03-06T20:00:01Z

well this would've been helpful 2 weeks ago lol, I learned how SVGs work and manually edited them to make an isometric cube

This extension can help those who don't know SVG.

WAYLIVES · 2025-03-07T08:08:31Z

!format

Brackets-Coder

Just a few tiny changes before this can be merged.
Overall it's a good extension, but a few things to consider:

It's great for editing SVGs at runtime, but when making complex SVGs, blocks can get very long very quickly. This isn't a problem, but it'd be nice if readability could be improved.
Have you thought about adding more SVG shapes, or potentially custom paths? They don't even have to be now, it could be a later update or not at all, just depends on the scope of this extension.

Brackets-Coder · 2025-09-18T02:29:26Z

docs/WAYLIVES/SVG.md

+- rectangle
+- circle
+
+## Блоки


There's still a Russian heading here...

Brackets-Coder · 2025-09-18T02:29:40Z

docs/WAYLIVES/SVG.md

+
+(linecap) - here you can set the shape of the line ends.
+
+## Пример-проект


Brackets-Coder · 2025-09-18T02:30:08Z

extensions/WAYLIVES/SVG/1.0.1.js

+// ID: WRsvg
+// Description: Create SVG elements.
+// By: WAYLIVES <https://scratch.mit.edu/users/WAYLIVES/>
+// License: MIT


Did you choose MIT out of personal preference?

Brackets-Coder · 2025-09-18T02:30:28Z

extensions/WAYLIVES/SVG/1.0.1.js

+  "use strict";
+
+  if (!Scratch.extensions.unsandboxed) {
+    throw new Error("svg");


Suggested change

throw new Error("svg");

throw new Error("SVG extension must run unsandboxed.");

Brackets-Coder · 2025-09-18T02:30:50Z

extensions/WAYLIVES/SVG/1.0.1.js

+  class svg {
+    getInfo() {
+      return {
+        id: "svg",


Suggested change

id: "svg",

id: "WRsvg",

Brackets-Coder · 2025-09-18T02:31:04Z

extensions/WAYLIVES/SVG/1.0.1.js

+
+          {
+            blockType: Scratch.BlockType.LABEL,
+            text: Scratch.translate("The basis of SVG:"),


Suggested change

text: Scratch.translate("The basis of SVG:"),

text: Scratch.translate("The basics of SVG"),

I can't tell if this is supposed to be basics or basis

also, you should remove the colon from every single one of your label blocks

Brackets-Coder · 2025-09-18T02:33:26Z

extensions/WAYLIVES/SVG/1.0.1.js

+      return (
+        '<svg width="' + (args["WIDTH"] + ('" height="' + (args["HEIGHT"] + ('" viewBox="' + ("0 0 " + (args["WIDTH"] + (" " + (args["HEIGHT"] + ('" fill="' + ("none" + ('" xmlns="' + ("http://www.w3.org/2000/svg" + ('">' + args["ELEMENTS"]))))))))))))) + "</svg>"
+      );
+    }
+
+    line(args) {
+      // prettier-ignore
+      return (
+        '<line x1="' + (args["XA"] + ('" y1="' + (args["YA"] + ('" x2="' + (args["XB"] + ('" y2="' + (args["YB"] + ('" stroke-width="' + (args["WIDTH"] + ('" stroke="' + (args["COLOR"] + ('" stroke-dasharray="' + (args["DASH"] + (" " + (args["GAP"] + ('" stroke-linecap="' + (args["LINECAP"] + ('" stroke-opacity="' + (args["OPACITY"] / 100 + '"'))))))))))))))))))) + "/>"
+      );


Prettier still decided to format these even though you said ignore... ??

Brackets-Coder · 2025-09-18T02:34:02Z

images/WAYLIVES/SVG.svg

The thumbnail still looks fantastic, nice job.

Brackets-Coder · 2025-09-18T02:42:27Z

Seems to work pretty well

WAYLIVES and others added 25 commits February 25, 2025 13:08

Merge pull request #1 from TurboWarp/master

d8d4660

🖼 NEW EXTENSION IMAGES

Create 1.0.0.js

950a9de

[Automated] Format code

3d09c90

Update 1.0.0.js

a1a7359

Update 1.0.0.js

e7b0867

[Automated] Format code

a33d0b2

Update 1.0.0.js

ea8e1e5

Update 1.0.0.js

e01604f

Update 1.0.0.js

1188bb5

Update 1.0.0.js

a2c43fb

Update 1.0.0.js

537c8c7

Update 1.0.0.js

5f6b77d

Create Window Settings.svg

77c3421

Update 1.0.0.js

4e77dc8

Rename 1.0.0.js to 1.0.0.js

02ebdfd

Rename Window Settings.svg to Window Settings.svg

e4e2c9f

Update and rename 1.0.0.js to 2.0.0.js

db656c4

Update 2.0.0.js

2411fe3

Create 1.0.1.js

46abee7

Delete extensions/WAYLIVES/SVG directory

1ff413f

Create 1.0.1.js

568253c

Delete extensions/WAYLIVES/Window Settings/SVG directory

8331ebd

Create 1.0.1.js

bf6a38f

[Automated] Format code

e198545

Update 1.0.1.js

90d23ab

github-actions bot added the pr: new extension Pull requests that add a new extension label Mar 3, 2025

DangoCat and others added 3 commits March 3, 2025 08:54

[Automated] Format code

36f60c6

Update 1.0.1.js

0831d51

Update 1.0.1.js

4bfba54

Brackets-Coder reviewed Mar 4, 2025

View reviewed changes

extensions/WAYLIVES/SVG/1.0.1.js Show resolved Hide resolved

WAYLIVES added 7 commits March 4, 2025 23:05

Update extensions.json

fdd49ac

Create SVG.md

eaa65e7

Update SVG.md

9fb195b

Update SVG.md

808a8b5

Update SVG.md

d06fcd9

Update SVG.md

7afe800

Update SVG.md

385cc0f

hammouda101010 reviewed Mar 5, 2025

View reviewed changes

WAYLIVES added 3 commits March 5, 2025 18:10

Update 1.0.1.js

4fdd134

Update 1.0.1.js

41ea579

Delete images/WAYLIVES/Window Settings.svg

d9f1c7a

WAYLIVES added 5 commits March 5, 2025 22:04

Update SVG.md

50a3324

Update SVG.md

2645267

Add files via upload

0955787

Update SVG.md

a51e001

Delete samples/SVG.sb3

a9fa4e1

Update 1.0.1.js

40cac2a

[Automated] Format code

5b3ee0a

Brackets-Coder requested changes Sep 18, 2025

View reviewed changes


		(linecap) - here you can set the shape of the line ends.

		## Пример-проект

	throw new Error("svg");
	throw new Error("SVG extension must run unsandboxed.");

	text: Scratch.translate("The basis of SVG:"),
	text: Scratch.translate("The basics of SVG"),

Extension: "SVG" #2005

Are you sure you want to change the base?

Extension: "SVG" #2005

Uh oh!

Conversation

WAYLIVES commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Extension: "SVG"

Image:

Uh oh!

WAYLIVES commented Mar 3, 2025

Uh oh!

Uh oh!

Brackets-Coder commented Mar 4, 2025

Uh oh!

WAYLIVES commented Mar 4, 2025

Uh oh!

WAYLIVES commented Mar 4, 2025

Uh oh!

WAYLIVES commented Mar 4, 2025

Uh oh!

Brackets-Coder commented Mar 4, 2025

Uh oh!

hammouda101010 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WAYLIVES commented Mar 5, 2025

Uh oh!

snowboyz0825 commented Mar 6, 2025

Uh oh!

WAYLIVES commented Mar 6, 2025

Uh oh!

WAYLIVES commented Mar 7, 2025

Uh oh!

Brackets-Coder left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Brackets-Coder commented Sep 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

WAYLIVES commented Mar 3, 2025 •

edited

Loading