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

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

extensions/WAYLIVES/SVG/1.0.1.js

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


This is correct

Brackets-Coder · 2025-03-04T17:10:54Z

extensions/WAYLIVES/SVG/1.0.1.js

+        menus: {
+          LINECAPmenu: {
+            acceptReporters: true,
+            items: [
+              {
+                text: Scratch.translate("round"),
+                value: "round",
+              },
+              {
+                text: Scratch.translate("butt"),
+                value: "butt",
+              },
+              {
+                text: Scratch.translate("square"),
+                value: "square",
+              },
+            ],
+          },


I approve of the new menus, but what is butt supposed to be?

I'll check it out now xD

https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes

https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Fills_and_Strokes

Ah, that makes sense now. You might want to clarify that in the documentation

Yes, I want to make documentation on this topic, because many people don't understand it.

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

+                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😭 🙏

hammouda101010 · 2025-03-05T14:34:11Z

images/WAYLIVES/SVG.svg

this one is pretty nice

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

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

Delete extensions/WAYLIVES/Window Settings directory

147f340

Brackets-Coder reviewed Mar 4, 2025

View reviewed changes

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extension: "SVG" #2005

Extension: "SVG" #2005

WAYLIVES commented Mar 3, 2025 •

edited

Loading

WAYLIVES commented Mar 3, 2025

Brackets-Coder Mar 4, 2025

WAYLIVES Mar 4, 2025

Brackets-Coder Mar 4, 2025

WAYLIVES Mar 4, 2025

WAYLIVES Mar 4, 2025

WAYLIVES Mar 4, 2025

Brackets-Coder Mar 4, 2025

WAYLIVES Mar 4, 2025

Brackets-Coder commented Mar 4, 2025

WAYLIVES commented Mar 4, 2025

WAYLIVES commented Mar 4, 2025

WAYLIVES commented Mar 4, 2025

Brackets-Coder commented Mar 4, 2025

hammouda101010 left a comment

hammouda101010 Mar 5, 2025

hammouda101010 Mar 5, 2025

hammouda101010 Mar 5, 2025

hammouda101010 Mar 5, 2025

hammouda101010 Mar 5, 2025

hammouda101010 Mar 5, 2025

hammouda101010 Mar 5, 2025

WAYLIVES commented Mar 5, 2025

snowboyz0825 commented Mar 6, 2025

WAYLIVES commented Mar 6, 2025

WAYLIVES commented Mar 7, 2025

Extension: "SVG" #2005

Are you sure you want to change the base?

Extension: "SVG" #2005

Conversation

WAYLIVES commented Mar 3, 2025 • edited Loading

Extension: "SVG"

Image:

WAYLIVES commented Mar 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Brackets-Coder commented Mar 4, 2025

WAYLIVES commented Mar 4, 2025

WAYLIVES commented Mar 4, 2025

WAYLIVES commented Mar 4, 2025

Brackets-Coder commented Mar 4, 2025

hammouda101010 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

WAYLIVES commented Mar 5, 2025

snowboyz0825 commented Mar 6, 2025

WAYLIVES commented Mar 6, 2025

WAYLIVES commented Mar 7, 2025

WAYLIVES commented Mar 3, 2025 •

edited

Loading