diff --git a/docs/WAYLIVES/SVG.md b/docs/WAYLIVES/SVG.md
new file mode 100644
index 0000000000..e36108545b
--- /dev/null
+++ b/docs/WAYLIVES/SVG.md
@@ -0,0 +1,118 @@
+# SVG
+
+SVG is an XML language that is designed for drawing vector images. There are two types of images: raster and vector, so using SVG you can draw vector graphics.
+
+Example:
+
+
+ - This image belongs to @WAYLIVES
+
+##
+
+Using the "SVG" extension, you can create code for simple SVG images, where the following elements will be available:
+- line
+- rectangle
+- circle
+
+## Блоки
+### SVG-frame:
+```scratch
+(SVG-frame // width:[100] height:[100] elements in svg:[...] :: #9823FF)
+```
+
+
+Nothing will work without this block, it sets the beginning and end of vector images.
+
+(width) - here you set the width of the SVG format
+
+(height) - here you set the height of the SVG format
+
+(elements in svg) - here you can insert SVG elements with which you will draw images.
+
+### Line:
+
+```scratch
+(LINE // x1, y1:[4][4] x2, y2:[96][96] width:[8] color:[#FF0000] opacity:[100]% dash, gap:[0][0] linecap:[round v] :: #9823FF)
+```
+
+
+You can use this block to draw lines.
+
+(x1), (y2) - is the position of the first point of the line along the X, Y coordinate (SVG coordinates: https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Positions ).
+
+(x2), (y2) - is the position of the end (second) point of the line along the X, Y coordinate.
+
+(width) - here you can set the line thickness.
+
+(color) - here you set the color of the line.
+
+(opacity) - here you set the transparency of the line as a percentage (%).
+
+(dash), (gap) - you can use these parameters to set the line type. Dash is the length of the dotted lines. Gap is the indentation, i.e. the distance between the dotted lines.
+
+(linecap) - here you can set the shape of the line ends (more details here: https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap ).
+
+Linecap:
+
+
+
+### Rect:
+
+```scratch
+(RECT // x, y:[4][4] width:[92] height:[92] radius:[20] fill color:[#FF0000] fill opacity:[100]% stroke width:[8] stroke color[#000000] stroke opacity:[100]% dash, gap:[0][0] stroke linecap:[round v] :: #9823FF)
+```
+
+
+You can use this block to draw rectangles and squares.
+
+(x), (y) - is the position of the rectangle's starting point along the X, Y coordinate.
+
+(width), (height) - are the width and height of the rectangle.
+
+(radius) - here you set the rounded corners of the rectangle.
+
+(fill color) - here you set the fill color of the rectangle.
+
+(fill opacity) - here you set the transparency of the rectangle fill as a percentage (%).
+
+(stroke width) - here you set the stroke thickness of the rectangle.
+
+(stroke color) - here you set the stroke color.
+
+(stroke opacity) - here you set the transparency of the stroke.
+
+(dash), (gap) - you can use these parameters to set the line type. Dash is the length of the dotted lines. Gap is the indentation, i.e. the distance between the dotted lines.
+
+(linecap) - here you can set the shape of the line ends.
+
+### Ellipse:
+
+```scratch
+(ELLIPSE // cx, cy:[50][50] width:[92] height:[92] fill color:[#FF0000] fill opacity:[100]% stroke width:[8] stroke color[#000000] stroke opacity:[100]% dash, gap:[0][0] stroke linecap:[round v] :: #9823FF)
+```
+
+
+You can use this block to draw circles and ovals.
+
+(cx), (cy) - is the position of the center point of the circle along the X, Y coordinate.
+
+(width), (height) - are the width and height of the circle.
+
+(fill color) - here you set the fill color.
+
+(fill opacity) - here you set the transparency of the fill as a percentage (%).
+
+(stroke width) - here you set the thickness of the circle outline.
+
+(stroke color) - here you set the stroke color.
+
+(stroke opacity) - here you set the transparency of the stroke.
+
+(dash), (gap) - you can use these parameters to set the line type. Dash is the length of the dotted lines. Gap is the indentation, i.e. the distance between the dotted lines.
+
+(linecap) - here you can set the shape of the line ends.
+
+## Пример-проект
+
+
+
diff --git a/extensions/WAYLIVES/SVG/1.0.1.js b/extensions/WAYLIVES/SVG/1.0.1.js
new file mode 100644
index 0000000000..ac852e215c
--- /dev/null
+++ b/extensions/WAYLIVES/SVG/1.0.1.js
@@ -0,0 +1,282 @@
+// Name: SVG
+// ID: WRsvg
+// Description: Create SVG elements.
+// By: WAYLIVES
+// License: MIT
+
+// Version: 1.0.1
+
+(function (Scratch) {
+ "use strict";
+
+ if (!Scratch.extensions.unsandboxed) {
+ throw new Error("svg");
+ }
+
+ class svg {
+ getInfo() {
+ return {
+ id: "svg",
+ name: Scratch.translate("SVG"),
+ color1: "#9823FF",
+ color2: "#7C2DC1",
+ color3: "#2D3548",
+ docsURI: "https://extensions.turbowarp.org/WAYLIVES/SVG",
+ blocks: [
+ "---",
+
+ {
+ blockType: Scratch.BlockType.LABEL,
+ text: Scratch.translate("The basis of SVG:"),
+ },
+ {
+ 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: "",
+ },
+ },
+ },
+
+ "---",
+
+ {
+ blockType: Scratch.BlockType.LABEL,
+ text: Scratch.translate("SVG elements:"),
+ },
+ {
+ 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",
+ },
+ },
+ },
+ ],
+ menus: {
+ LINECAPmenu: {
+ acceptReporters: true,
+ items: [
+ {
+ text: Scratch.translate("round"),
+ value: "round",
+ },
+ {
+ text: Scratch.translate("butt"),
+ value: "butt",
+ },
+ {
+ text: Scratch.translate("square"),
+ value: "square",
+ },
+ ],
+ },
+ },
+ };
+ }
+
+ svg(args) {
+ // prettier-ignore
+ return (
+ '"
+ );
+ }
+
+ line(args) {
+ // prettier-ignore
+ return (
+ '"
+ );
+ }
+
+ rect(args) {
+ // prettier-ignore
+ return (
+ '"
+ );
+ }
+
+ ellipse(args) {
+ // prettier-ignore
+ return (
+ '"
+ );
+ }
+ }
+
+ Scratch.extensions.register(new svg());
+})(Scratch);
diff --git a/extensions/extensions.json b/extensions/extensions.json
index d8ed71e33d..a8370cf4fb 100644
--- a/extensions/extensions.json
+++ b/extensions/extensions.json
@@ -68,6 +68,7 @@
"DNin/wake-lock",
"Skyhigh173/json",
"mbw/xml",
+ "WAYLIVES/SVG",
"numerical-encoding-2",
"cs2627883/numericalencoding",
"SharkPool/Camera",
diff --git a/images/WAYLIVES/SVG.svg b/images/WAYLIVES/SVG.svg
new file mode 100644
index 0000000000..d10ab7c44d
--- /dev/null
+++ b/images/WAYLIVES/SVG.svg
@@ -0,0 +1,50 @@
+
+ - This image belongs to @WAYLIVES
+
+##
+
+Using the "SVG" extension, you can create code for simple SVG images, where the following elements will be available:
+- line
+- rectangle
+- circle
+
+## Блоки
+### SVG-frame:
+```scratch
+(SVG-frame // width:[100] height:[100] elements in svg:[...] :: #9823FF)
+```
+
+
+Nothing will work without this block, it sets the beginning and end of vector images.
+
+(width) - here you set the width of the SVG format
+
+(height) - here you set the height of the SVG format
+
+(elements in svg) - here you can insert SVG elements with which you will draw images.
+
+### Line:
+
+```scratch
+(LINE // x1, y1:[4][4] x2, y2:[96][96] width:[8] color:[#FF0000] opacity:[100]% dash, gap:[0][0] linecap:[round v] :: #9823FF)
+```
+
+
+You can use this block to draw lines.
+
+(x1), (y2) - is the position of the first point of the line along the X, Y coordinate (SVG coordinates: https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Positions ).
+
+(x2), (y2) - is the position of the end (second) point of the line along the X, Y coordinate.
+
+(width) - here you can set the line thickness.
+
+(color) - here you set the color of the line.
+
+(opacity) - here you set the transparency of the line as a percentage (%).
+
+(dash), (gap) - you can use these parameters to set the line type. Dash is the length of the dotted lines. Gap is the indentation, i.e. the distance between the dotted lines.
+
+(linecap) - here you can set the shape of the line ends (more details here: https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap ).
+
+Linecap:
+
+
+
+### Rect:
+
+```scratch
+(RECT // x, y:[4][4] width:[92] height:[92] radius:[20] fill color:[#FF0000] fill opacity:[100]% stroke width:[8] stroke color[#000000] stroke opacity:[100]% dash, gap:[0][0] stroke linecap:[round v] :: #9823FF)
+```
+
+
+You can use this block to draw rectangles and squares.
+
+(x), (y) - is the position of the rectangle's starting point along the X, Y coordinate.
+
+(width), (height) - are the width and height of the rectangle.
+
+(radius) - here you set the rounded corners of the rectangle.
+
+(fill color) - here you set the fill color of the rectangle.
+
+(fill opacity) - here you set the transparency of the rectangle fill as a percentage (%).
+
+(stroke width) - here you set the stroke thickness of the rectangle.
+
+(stroke color) - here you set the stroke color.
+
+(stroke opacity) - here you set the transparency of the stroke.
+
+(dash), (gap) - you can use these parameters to set the line type. Dash is the length of the dotted lines. Gap is the indentation, i.e. the distance between the dotted lines.
+
+(linecap) - here you can set the shape of the line ends.
+
+### Ellipse:
+
+```scratch
+(ELLIPSE // cx, cy:[50][50] width:[92] height:[92] fill color:[#FF0000] fill opacity:[100]% stroke width:[8] stroke color[#000000] stroke opacity:[100]% dash, gap:[0][0] stroke linecap:[round v] :: #9823FF)
+```
+
+
+You can use this block to draw circles and ovals.
+
+(cx), (cy) - is the position of the center point of the circle along the X, Y coordinate.
+
+(width), (height) - are the width and height of the circle.
+
+(fill color) - here you set the fill color.
+
+(fill opacity) - here you set the transparency of the fill as a percentage (%).
+
+(stroke width) - here you set the thickness of the circle outline.
+
+(stroke color) - here you set the stroke color.
+
+(stroke opacity) - here you set the transparency of the stroke.
+
+(dash), (gap) - you can use these parameters to set the line type. Dash is the length of the dotted lines. Gap is the indentation, i.e. the distance between the dotted lines.
+
+(linecap) - here you can set the shape of the line ends.
+
+## Пример-проект
+
+
+
diff --git a/extensions/WAYLIVES/SVG/1.0.1.js b/extensions/WAYLIVES/SVG/1.0.1.js
new file mode 100644
index 0000000000..ac852e215c
--- /dev/null
+++ b/extensions/WAYLIVES/SVG/1.0.1.js
@@ -0,0 +1,282 @@
+// Name: SVG
+// ID: WRsvg
+// Description: Create SVG elements.
+// By: WAYLIVES