@nasser-sw/fabric 7.0.0-beta1

package/src/parser/applyViewboxTransform.ts

@@ -0,0 +1,174 @@
+import { svgNS } from './constants';
+import {
+  parsePreserveAspectRatioAttribute,
+  parseUnit,
+} from '../util/misc/svgParsing';
+import { svgViewBoxElementsRegEx, reViewBoxAttrValue } from './constants';
+import { NONE } from '../constants';
+
+export type ParsedViewboxTransform = Partial<{
+  width: number;
+  height: number;
+  minX: number;
+  minY: number;
+  viewBoxWidth: number;
+  viewBoxHeight: number;
+}>;
+
+/**
+ * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
+ */
+export function applyViewboxTransform(
+  element: Element,
+): ParsedViewboxTransform {
+  if (!svgViewBoxElementsRegEx.test(element.nodeName)) {
+    return {};
+  }
+  const viewBoxAttr: string | null = element.getAttribute('viewBox');
+  let scaleX = 1;
+  let scaleY = 1;
+  let minX = 0;
+  let minY = 0;
+  let matrix;
+  let el;
+  const widthAttr = element.getAttribute('width');
+  const heightAttr = element.getAttribute('height');
+  const x = element.getAttribute('x') || 0;
+  const y = element.getAttribute('y') || 0;
+  const goodViewbox = viewBoxAttr && reViewBoxAttrValue.test(viewBoxAttr);
+  const missingViewBox = !goodViewbox;
+  const missingDimAttr =
+    !widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%';
+
+  let translateMatrix = '';
+  let widthDiff = 0;
+  let heightDiff = 0;
+
+  if (missingViewBox) {
+    if (
+      (x || y) &&
+      element.parentNode &&
+      element.parentNode.nodeName !== '#document'
+    ) {
+      translateMatrix =
+        ' translate(' + parseUnit(x || '0') + ' ' + parseUnit(y || '0') + ') ';
+      matrix = (element.getAttribute('transform') || '') + translateMatrix;
+      element.setAttribute('transform', matrix);
+      element.removeAttribute('x');
+      element.removeAttribute('y');
+    }
+  }
+
+  if (missingViewBox && missingDimAttr) {
+    return {
+      width: 0,
+      height: 0,
+    };
+  }
+
+  const parsedDim: ParsedViewboxTransform = {
+    width: 0,
+    height: 0,
+  };
+
+  if (missingViewBox) {
+    parsedDim.width = parseUnit(widthAttr!);
+    parsedDim.height = parseUnit(heightAttr!);
+    // set a transform for elements that have x y and are inner(only) SVGs
+    return parsedDim;
+  }
+
+  const pasedViewBox = viewBoxAttr.match(reViewBoxAttrValue)!;
+  minX = -parseFloat(pasedViewBox[1]);
+  minY = -parseFloat(pasedViewBox[2]);
+  const viewBoxWidth = parseFloat(pasedViewBox[3]);
+  const viewBoxHeight = parseFloat(pasedViewBox[4]);
+  parsedDim.minX = minX;
+  parsedDim.minY = minY;
+  parsedDim.viewBoxWidth = viewBoxWidth;
+  parsedDim.viewBoxHeight = viewBoxHeight;
+  if (!missingDimAttr) {
+    parsedDim.width = parseUnit(widthAttr);
+    parsedDim.height = parseUnit(heightAttr);
+    scaleX = parsedDim.width / viewBoxWidth;
+    scaleY = parsedDim.height / viewBoxHeight;
+  } else {
+    parsedDim.width = viewBoxWidth;
+    parsedDim.height = viewBoxHeight;
+  }
+
+  // default is to preserve aspect ratio
+  const preserveAspectRatio = parsePreserveAspectRatioAttribute(
+    element.getAttribute('preserveAspectRatio') || '',
+  );
+  if (preserveAspectRatio.alignX !== NONE) {
+    //translate all container for the effect of Mid, Min, Max
+    if (preserveAspectRatio.meetOrSlice === 'meet') {
+      scaleY = scaleX = scaleX > scaleY ? scaleY : scaleX;
+      // calculate additional translation to move the viewbox
+    }
+    if (preserveAspectRatio.meetOrSlice === 'slice') {
+      scaleY = scaleX = scaleX > scaleY ? scaleX : scaleY;
+      // calculate additional translation to move the viewbox
+    }
+    widthDiff = parsedDim.width - viewBoxWidth * scaleX;
+    heightDiff = parsedDim.height - viewBoxHeight * scaleX;
+    if (preserveAspectRatio.alignX === 'Mid') {
+      widthDiff /= 2;
+    }
+    if (preserveAspectRatio.alignY === 'Mid') {
+      heightDiff /= 2;
+    }
+    if (preserveAspectRatio.alignX === 'Min') {
+      widthDiff = 0;
+    }
+    if (preserveAspectRatio.alignY === 'Min') {
+      heightDiff = 0;
+    }
+  }
+
+  if (
+    scaleX === 1 &&
+    scaleY === 1 &&
+    minX === 0 &&
+    minY === 0 &&
+    x === 0 &&
+    y === 0
+  ) {
+    return parsedDim;
+  }
+  if ((x || y) && element.parentNode!.nodeName !== '#document') {
+    translateMatrix =
+      ' translate(' + parseUnit(x || '0') + ' ' + parseUnit(y || '0') + ') ';
+  }
+
+  matrix =
+    translateMatrix +
+    ' matrix(' +
+    scaleX +
+    ' 0' +
+    ' 0 ' +
+    scaleY +
+    ' ' +
+    (minX * scaleX + widthDiff) +
+    ' ' +
+    (minY * scaleY + heightDiff) +
+    ') ';
+  // seems unused.
+  // parsedDim.viewboxTransform = parseTransformAttribute(matrix);
+  if (element.nodeName === 'svg') {
+    el = element.ownerDocument.createElementNS(svgNS, 'g');
+    // element.firstChild != null
+    while (element.firstChild) {
+      el.appendChild(element.firstChild);
+    }
+    element.appendChild(el);
+  } else {
+    el = element;
+    el.removeAttribute('x');
+    el.removeAttribute('y');
+    matrix = el.getAttribute('transform') + matrix;
+  }
+  el.setAttribute('transform', matrix);
+  return parsedDim;
+}

package/src/parser/attributes.ts

@@ -0,0 +1,27 @@
+import { FILL, STROKE } from '../constants';
+
+/**
+ * Attributes parsed from all SVG elements
+ * @type array
+ */
+export const SHARED_ATTRIBUTES = [
+  'display',
+  'transform',
+  FILL,
+  'fill-opacity',
+  'fill-rule',
+  'opacity',
+  STROKE,
+  'stroke-dasharray',
+  'stroke-linecap',
+  'stroke-dashoffset',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'id',
+  'paint-order',
+  'vector-effect',
+  'instantiated_by_use',
+  'clip-path',
+];

package/src/parser/constants.spec.ts

@@ -0,0 +1,36 @@
+// Yes a file for testing contansts
+import { describe, test, expect } from 'vitest';
+import { reViewBoxAttrValue } from './constants';
+
+describe('reViewBoxAttrValue', () => {
+  test('can detect valid viewbox', () => {
+    expect(reViewBoxAttrValue.test('0 0 408 1')).toBe(true);
+    const parsed = '0 0 408 1'.match(reViewBoxAttrValue)!;
+    expect(parsed[1]).toEqual('0');
+    expect(parsed[2]).toEqual('0');
+    expect(parsed[3]).toEqual('408');
+    expect(parsed[4]).toEqual('1');
+  });
+  test('can detect valid viewbox', () => {
+    expect(reViewBoxAttrValue.test('0.2 -0.0 -408.3 1')).toBe(true);
+    const parsed = '0.2 -0.0 -408.3 1'.match(reViewBoxAttrValue)!;
+    expect(parsed[1]).toEqual('0.2');
+    expect(parsed[2]).toEqual('-0.0');
+    expect(parsed[3]).toEqual('-408.3');
+    expect(parsed[4]).toEqual('1');
+  });
+  test('can detect invalid viewbox missing one number', () => {
+    expect(reViewBoxAttrValue.test('0 0 408')).toBe(false);
+  });
+  test('can detect invalid viewbox with extra numbers', () => {
+    expect(reViewBoxAttrValue.test('0 0 408 1 1')).toBe(false);
+  });
+  test('viewbox with mixed separator', () => {
+    expect(reViewBoxAttrValue.test('0,0 100,50')).toBe(true);
+    const parsed = '0,0 100,50'.match(reViewBoxAttrValue)!;
+    expect(parsed[1]).toEqual('0');
+    expect(parsed[2]).toEqual('0');
+    expect(parsed[3]).toEqual('100');
+    expect(parsed[4]).toEqual('50');
+  });
+});

package/src/parser/constants.ts

@@ -0,0 +1,88 @@
+import { getSvgRegex } from './getSvgRegex';
+import { LEFT, TOP } from '../constants';
+import { TEXT_DECORATION_THICKNESS } from '../shapes/Text/constants';
+
+// matches, e.g.: +14.56e-12, etc.
+export const reNum = String.raw`[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?`;
+export const viewportSeparator = String.raw`(?:\s*,?\s+|\s*,\s*)`;
+
+export const svgNS = 'http://www.w3.org/2000/svg';
+
+export const reFontDeclaration = new RegExp(
+  '(normal|italic)?\\s*(normal|small-caps)?\\s*' +
+    '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' +
+    reNum +
+    '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' +
+    reNum +
+    '))?\\s+(.*)',
+);
+
+export const svgValidTagNames = [
+    'path',
+    'circle',
+    'polygon',
+    'polyline',
+    'ellipse',
+    'rect',
+    'line',
+    'image',
+    'text',
+  ],
+  svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'],
+  svgInvalidAncestors = [
+    'pattern',
+    'defs',
+    'symbol',
+    'metadata',
+    'clipPath',
+    'mask',
+    'desc',
+  ],
+  svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'],
+  attributesMap = {
+    cx: LEFT,
+    x: LEFT,
+    r: 'radius',
+    cy: TOP,
+    y: TOP,
+    display: 'visible',
+    visibility: 'visible',
+    transform: 'transformMatrix',
+    'fill-opacity': 'fillOpacity',
+    'fill-rule': 'fillRule',
+    'font-family': 'fontFamily',
+    'font-size': 'fontSize',
+    'font-style': 'fontStyle',
+    'font-weight': 'fontWeight',
+    'letter-spacing': 'charSpacing',
+    'paint-order': 'paintFirst',
+    'stroke-dasharray': 'strokeDashArray',
+    'stroke-dashoffset': 'strokeDashOffset',
+    'stroke-linecap': 'strokeLineCap',
+    'stroke-linejoin': 'strokeLineJoin',
+    'stroke-miterlimit': 'strokeMiterLimit',
+    'stroke-opacity': 'strokeOpacity',
+    'stroke-width': 'strokeWidth',
+    'text-decoration': 'textDecoration',
+    'text-anchor': 'textAnchor',
+    opacity: 'opacity',
+    'clip-path': 'clipPath',
+    'clip-rule': 'clipRule',
+    'vector-effect': 'strokeUniform',
+    'image-rendering': 'imageSmoothing',
+    'text-decoration-thickness': TEXT_DECORATION_THICKNESS,
+  },
+  fSize = 'font-size',
+  cPath = 'clip-path';
+
+export const svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames);
+
+export const svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements);
+
+export const svgValidParentsRegEx = getSvgRegex(svgValidParents);
+
+// http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
+
+export const reViewBoxAttrValue = new RegExp(
+  String.raw`^\s*(${reNum})${viewportSeparator}(${reNum})${viewportSeparator}(${reNum})${viewportSeparator}(${reNum})\s*$`,
+);

package/src/parser/doesSomeParentMatch.ts

@@ -0,0 +1,21 @@
+import { selectorMatches } from './selectorMatches';
+
+export function doesSomeParentMatch(
+  element: HTMLElement | SVGElement,
+  selectors: string[],
+) {
+  let selector: string,
+    parentMatching = true;
+  while (
+    element.parentElement &&
+    element.parentElement.nodeType === 1 &&
+    selectors.length
+  ) {
+    if (parentMatching) {
+      selector = selectors.pop()!;
+    }
+    element = element.parentElement;
+    parentMatching = selectorMatches(element, selector!);
+  }
+  return selectors.length === 0;
+}

package/src/parser/elementMatchesRule.ts

@@ -0,0 +1,19 @@
+import { selectorMatches } from './selectorMatches';
+import { doesSomeParentMatch } from './doesSomeParentMatch';
+
+/**
+ * @private
+ */
+
+export function elementMatchesRule(
+  element: HTMLElement | SVGElement,
+  selectors: string[],
+) {
+  let parentMatching = true;
+  // start from rightmost selector.
+  const firstMatching = selectorMatches(element, selectors.pop()!);
+  if (firstMatching && selectors.length) {
+    parentMatching = doesSomeParentMatch(element, selectors);
+  }
+  return firstMatching && parentMatching && selectors.length === 0;
+}

package/src/parser/elements_parser.ts

@@ -0,0 +1,230 @@
+import { Gradient } from '../gradient/Gradient';
+import { Group } from '../shapes/Group';
+import { FabricImage } from '../shapes/Image';
+import { classRegistry } from '../ClassRegistry';
+import {
+  invertTransform,
+  multiplyTransformMatrices,
+  qrDecompose,
+} from '../util/misc/matrix';
+import { removeTransformMatrixForSvgParsing } from '../util/transform_matrix_removal';
+import type { FabricObject } from '../shapes/Object/FabricObject';
+import { Point } from '../Point';
+import { CENTER, FILL, STROKE } from '../constants';
+import { getGradientDefs } from './getGradientDefs';
+import { getCSSRules } from './getCSSRules';
+import type { LoadImageOptions } from '../util';
+import type { CSSRules, TSvgReviverCallback } from './typedefs';
+import type { ParsedViewboxTransform } from './applyViewboxTransform';
+import type { SVGOptions } from '../gradient';
+import { getTagName } from './getTagName';
+import { parseTransformAttribute } from './parseTransformAttribute';
+
+const findTag = (el: Element) =>
+  classRegistry.getSVGClass(getTagName(el).toLowerCase());
+
+type StorageType = {
+  fill: SVGGradientElement;
+  stroke: SVGGradientElement;
+  clipPath: Element[];
+};
+
+type NotParsedFabricObject = FabricObject & {
+  fill: string;
+  stroke: string;
+  clipPath?: string;
+  clipRule?: CanvasFillRule;
+};
+
+export class ElementsParser {
+  declare elements: Element[];
+  declare options: LoadImageOptions & ParsedViewboxTransform;
+  declare reviver?: TSvgReviverCallback;
+  declare regexUrl: RegExp;
+  declare doc: Document;
+  declare clipPaths: Record<string, Element[]>;
+  declare gradientDefs: Record<string, SVGGradientElement>;
+  declare cssRules: CSSRules;
+
+  constructor(
+    elements: Element[],
+    options: LoadImageOptions & ParsedViewboxTransform,
+    reviver: TSvgReviverCallback | undefined,
+    doc: Document,
+    clipPaths: Record<string, Element[]>,
+  ) {
+    this.elements = elements;
+    this.options = options;
+    this.reviver = reviver;
+    this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g;
+    this.doc = doc;
+    this.clipPaths = clipPaths;
+    this.gradientDefs = getGradientDefs(doc);
+    this.cssRules = getCSSRules(doc);
+  }
+
+  parse(): Promise<Array<FabricObject | null>> {
+    return Promise.all(
+      this.elements.map((element) => this.createObject(element)),
+    );
+  }
+
+  async createObject(el: Element): Promise<FabricObject | null> {
+    const klass = findTag(el);
+    if (klass) {
+      const obj: NotParsedFabricObject = await klass.fromElement(
+        el,
+        this.options,
+        this.cssRules,
+      );
+      this.resolveGradient(obj, el, FILL);
+      this.resolveGradient(obj, el, STROKE);
+      if (obj instanceof FabricImage && obj._originalElement) {
+        removeTransformMatrixForSvgParsing(
+          obj,
+          obj.parsePreserveAspectRatioAttribute(),
+        );
+      } else {
+        removeTransformMatrixForSvgParsing(obj);
+      }
+      await this.resolveClipPath(obj, el);
+      this.reviver && this.reviver(el, obj);
+      return obj;
+    }
+    return null;
+  }
+
+  extractPropertyDefinition(
+    obj: NotParsedFabricObject,
+    property: 'fill' | 'stroke' | 'clipPath',
+    storage: Record<string, StorageType[typeof property]>,
+  ): StorageType[typeof property] | undefined {
+    const value = obj[property]!,
+      regex = this.regexUrl;
+    if (!regex.test(value)) {
+      return undefined;
+    }
+    // verify: can we remove the 'g' flag? and remove lastIndex changes?
+    regex.lastIndex = 0;
+    // we passed the regex test, so we know is not null;
+    const id = regex.exec(value)![1];
+    regex.lastIndex = 0;
+    // @todo fix this
+    return storage[id];
+  }
+
+  resolveGradient(
+    obj: NotParsedFabricObject,
+    el: Element,
+    property: 'fill' | 'stroke',
+  ) {
+    const gradientDef = this.extractPropertyDefinition(
+      obj,
+      property,
+      this.gradientDefs,
+    ) as SVGGradientElement;
+    if (gradientDef) {
+      const opacityAttr = el.getAttribute(property + '-opacity');
+      const gradient = Gradient.fromElement(gradientDef, obj, {
+        ...this.options,
+        opacity: opacityAttr,
+      } as SVGOptions);
+      obj.set(property, gradient);
+    }
+  }
+
+  // TODO: resolveClipPath could be run once per clippath with minor work per object.
+  // is a refactor that i m not sure is worth on this code
+  async resolveClipPath(
+    obj: NotParsedFabricObject,
+    usingElement: Element,
+    exactOwner?: Element,
+  ) {
+    const clipPathElements = this.extractPropertyDefinition(
+      obj,
+      'clipPath',
+      this.clipPaths,
+    ) as Element[];
+    if (clipPathElements) {
+      const objTransformInv = invertTransform(obj.calcTransformMatrix());
+      const clipPathTag = clipPathElements[0].parentElement!;
+      let clipPathOwner = usingElement;
+      while (
+        !exactOwner &&
+        clipPathOwner.parentElement &&
+        clipPathOwner.getAttribute('clip-path') !== obj.clipPath
+      ) {
+        clipPathOwner = clipPathOwner.parentElement;
+      }
+      // move the clipPath tag as sibling to the real element that is using it
+      clipPathOwner.parentElement!.appendChild(clipPathTag);
+
+      // this multiplication order could be opposite.
+      // but i don't have an svg to test it
+      // at the first SVG that has a transform on both places and is misplaced
+      // try to invert this multiplication order
+      const finalTransform = parseTransformAttribute(
+        `${clipPathOwner.getAttribute('transform') || ''} ${
+          clipPathTag.getAttribute('originalTransform') || ''
+        }`,
+      );
+
+      clipPathTag.setAttribute(
+        'transform',
+        `matrix(${finalTransform.join(',')})`,
+      );
+
+      const container = await Promise.all(
+        clipPathElements.map((clipPathElement) => {
+          return findTag(clipPathElement)
+            .fromElement(clipPathElement, this.options, this.cssRules)
+            .then((enlivedClippath: NotParsedFabricObject) => {
+              removeTransformMatrixForSvgParsing(enlivedClippath);
+              enlivedClippath.fillRule = enlivedClippath.clipRule!;
+              delete enlivedClippath.clipRule;
+              return enlivedClippath;
+            });
+        }),
+      );
+      const clipPath =
+        container.length === 1 ? container[0] : new Group(container);
+      const gTransform = multiplyTransformMatrices(
+        objTransformInv,
+        clipPath.calcTransformMatrix(),
+      );
+      if (clipPath.clipPath) {
+        await this.resolveClipPath(
+          clipPath,
+          clipPathOwner,
+          // this is tricky.
+          // it tries to differentiate from when clipPaths are inherited by outside groups
+          // or when are really clipPaths referencing other clipPaths
+          clipPathTag.getAttribute('clip-path') ? clipPathOwner : undefined,
+        );
+      }
+      const { scaleX, scaleY, angle, skewX, translateX, translateY } =
+        qrDecompose(gTransform);
+      clipPath.set({
+        flipX: false,
+        flipY: false,
+      });
+      clipPath.set({
+        scaleX,
+        scaleY,
+        angle,
+        skewX,
+        skewY: 0,
+      });
+      clipPath.setPositionByOrigin(
+        new Point(translateX, translateY),
+        CENTER,
+        CENTER,
+      );
+      obj.clipPath = clipPath;
+    } else {
+      // if clip-path does not resolve to any element, delete the property.
+      delete obj.clipPath;
+      return;
+    }
+  }
+}

package/src/parser/getCSSRules.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from 'vitest';
+import { loadSVGFromString } from './loadSVGFromString';
+// Add `Circle` to the class registry, making it available during SVG parsing.
+import '../shapes/Circle';
+
+describe('getCSSRules', () => {
+  test('can load svgs with style tags with import statement', async () => {
+    const loaded =
+      await loadSVGFromString(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 4439.1 3733" xml:space="preserve"><style>
+  @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One%7Cfamily=Catamaran:wght@400,700%7Cfamily=Caveat+Brush%7Cfamily=Comfortaa:wght@400,500%7Cfamily=Henny+Penny%7Cfamily=Montserrat:wght@400,500,700%7Cfamily=Mulish:wght@400,500%7Cfamily=Oswald:wght@400,500%7Cfamily=PT+Sans%7Cfamily=Poppins:wght@300,500%7Cfamily=Prompt%7Cfamily=Roboto+Slab:wght@400,500%7Cfamily=Roboto:wght@300,400,700%7Cfamily=Rubik:wght@400,500%7Cfamily=Varela%7Cfamily=Viga%7Cfamily=Work+Sans:wght@300,400%7Cfamily=Yesteryear%7Cdisplay");
+
+  </style><defs/><rect x="0" y="0" width="100%" height="100%" fill="transparent"/><g transform="matrix(1 0 0 1 1643 1651.95)" id="COLORZONE-5" fill="#FFC900" style="fill: rgb(255, 201, 0);"><rect style="stroke: rgb(0, 0, 0); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(255, 201, 0); fill-rule: nonzero; opacity: 1;" x="-481.9" y="-141.75" rx="0" ry="0" width="963.8" height="283.5" fill="#FFC900"/></g></svg>`);
+    expect(loaded.objects).toHaveLength(2);
+  });
+
+  test('can load svgs with style tags with nested at-rules', async () => {
+    const loaded = await loadSVGFromString(`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <style>
+          circle { fill: black; }
+          @media (prefers-color-scheme: dark) { circle { fill: white; } }
+          @supports (display: flex) {
+            circle { color: blue; }
+          }
+          @scope (scope root) to (scope limit) {
+            circle { color: green; }
+          }
+        </style>
+        <circle r="10" cx="10" cy="10"/>
+      </svg>
+    `);
+    expect(loaded.objects).toHaveLength(1);
+  });
+
+  test('can load svgs with multiple style tags', async () => {
+    const loaded = await loadSVGFromString(`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20">
+        <style>
+          .blue { fill: blue; }
+        </style>
+        <style>
+          .red { fill: red; }
+        </style>
+        <circle class="blue" r="9" cx="10" cy="10"></circle>
+        <circle class="red" r="9" cx="30" cy="10"></circle>
+      </svg>
+    `);
+    expect(loaded.objects[0]).toMatchObject({ fill: 'blue' });
+    expect(loaded.objects[1]).toMatchObject({ fill: 'red' });
+  });
+});