Add SVG image suport (#2487)

* Add SVG blip extentions

* SVG Image feature now works

* Add and simplify tests

* Fix falsey issue with file

Write tests
100% Coverage

src/file/drawing/anchor/anchor.spec.ts

@@ -11,8 +11,9 @@ import { Anchor } from "./anchor";
 const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
     new Anchor({
         mediaData: {
+            type: "png",
             fileName: "test.png",
-            stream: Buffer.from(""),
+            data: Buffer.from(""),
             transformation: {
                 pixels: {
                     x: 0,

src/file/drawing/drawing.spec.ts

@@ -11,8 +11,9 @@ const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEU
 const createDrawing = (drawingOptions?: IDrawingOptions): Drawing =>
     new Drawing(
         {
+            type: "jpg",
             fileName: "test.jpg",
-            stream: Buffer.from(imageBase64Data, "base64"),
+            data: Buffer.from(imageBase64Data, "base64"),
             transformation: {
                 pixels: {
                     x: 100,

src/file/drawing/inline/graphic/graphic-data/pic/blip/blip-extentions.ts

@@ -0,0 +1,35 @@
+import { BuilderElement, XmlComponent } from "@file/xml-components";
+import { IMediaData } from "@file/media";
+
+const createSvgBlip = (mediaData: IMediaData): XmlComponent =>
+    new BuilderElement({
+        name: "asvg:svgBlip",
+        attributes: {
+            asvg: {
+                key: "xmlns:asvg",
+                value: "http://schemas.microsoft.com/office/drawing/2016/SVG/main",
+            },
+            embed: {
+                key: "r:embed",
+                value: `rId{${mediaData.fileName}}`,
+            },
+        },
+    });
+
+const createExtention = (mediaData: IMediaData): XmlComponent =>
+    new BuilderElement({
+        name: "a:ext",
+        attributes: {
+            uri: {
+                key: "uri",
+                value: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
+            },
+        },
+        children: [createSvgBlip(mediaData)],
+    });
+
+export const createExtentionList = (mediaData: IMediaData): XmlComponent =>
+    new BuilderElement({
+        name: "a:extLst",
+        children: [createExtention(mediaData)],
+    });

src/file/drawing/inline/graphic/graphic-data/pic/blip/blip-fill.ts

@@ -1,7 +1,7 @@
 import { IMediaData } from "@file/media";
 import { XmlComponent } from "@file/xml-components";
 
-import { Blip } from "./blip";
+import { createBlip } from "./blip";
 import { SourceRectangle } from "./source-rectangle";
 import { Stretch } from "./stretch";
 
@@ -9,7 +9,7 @@ export class BlipFill extends XmlComponent {
     public constructor(mediaData: IMediaData) {
         super("pic:blipFill");
 
-        this.root.push(new Blip(mediaData));
+        this.root.push(createBlip(mediaData));
         this.root.push(new SourceRectangle());
         this.root.push(new Stretch());
     }

src/file/drawing/inline/graphic/graphic-data/pic/blip/blip.ts

@@ -1,24 +1,24 @@
 import { IMediaData } from "@file/media";
-import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
+import { createExtentionList } from "./blip-extentions";
 
-class BlipAttributes extends XmlAttributeComponent<{
+type BlipAttributes = {
     readonly embed: string;
     readonly cstate: string;
-}> {
-    protected readonly xmlKeys = {
-        embed: "r:embed",
-        cstate: "cstate",
-    };
-}
+};
 
-export class Blip extends XmlComponent {
-    public constructor(mediaData: IMediaData) {
-        super("a:blip");
-        this.root.push(
-            new BlipAttributes({
-                embed: `rId{${mediaData.fileName}}`,
-                cstate: "none",
-            }),
-        );
-    }
-}
+export const createBlip = (mediaData: IMediaData): XmlComponent =>
+    new BuilderElement<BlipAttributes>({
+        name: "a:blip",
+        attributes: {
+            embed: {
+                key: "r:embed",
+                value: `rId{${mediaData.type === "svg" ? mediaData.fallback.fileName : mediaData.fileName}}`,
+            },
+            cstate: {
+                key: "cstate",
+                value: "none",
+            },
+        },
+        children: mediaData.type === "svg" ? [createExtentionList(mediaData)] : [],
+    });

src/file/drawing/inline/inline.spec.ts

@@ -8,8 +8,9 @@ describe("Inline", () => {
         const tree = new Formatter().format(
             createInline({
                 mediaData: {
+                    type: "png",
                     fileName: "test.png",
-                    stream: Buffer.from(""),
+                    data: Buffer.from(""),
                     transformation: {
                         pixels: {
                             x: 0,