[Bug]: SVG import bounds ignore viewBox/viewport; group dimensions larger than SVG width/height and hidden overflow becomes visible (v7)

[ab-etemadi]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

7.1.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

22.1.0

Link To Reproduction

https://codesandbox.io/p/sandbox/h2nlfp

Steps To Reproduce

1. Load an SVG that declares width="1486" height="1080" and viewBox="0 0 1486 1080", but contains geometry that extends outside the viewBox (overflow that is hidden in browser rendering).
2. Import using Fabric v7 loadSVGFromURL / loadSVGFromString.
3. Create a group from returned objects (either fabric.util.groupSVGElements(objects, options) or new fabric.Group(objects)).
4. Observe:
   • 5. The resulting Fabric group has larger width/height than the SVG viewport (e.g. ~2156×1359 instead of 1486×1080).
   • 6. Parts of the SVG that are hidden/clipped in browser become visible or affect bounding/selection.

Minimal code:

const { objects, options } = await fabric.loadSVGFromURL(svgURL);

const group = new fabric.Group(objects); // also reproducible with groupSVGElements(objects, options)

console.log("SVG declared:", options.width, options.height, options.viewBoxWidth, options.viewBoxHeight);
console.log("Fabric group:", group.width, group.height);

// Add to canvas
canvas.add(group);
canvas.setActiveObject(group);
canvas.requestRenderAll();

Expected Behavior

• Imported SVG group dimensions should match the SVG viewport/viewBox (or at least provide an option to):

  • treat SVG bounds as the viewBox/width/height
  • clip overflow consistently with browser SVG viewport behavior

• Hidden overflow content (outside viewBox / clipped in browser) should not:

  • expand Fabric object bounding boxes
  • become visible unexpectedly

• Scaling/centering based on SVG width/height/viewBox should produce a correct bounding box aligned with visible content.

Actual Behavior

• Fabric v7 produces a group bounding box larger than the SVG declared size:
  • SVG: 1486×1080
  • Fabric group: around 2156×1359
• Because bounds are larger than visible viewport, scaling-to-fit using group bounds makes visible artwork appear smaller than expected inside its bounding box.
• Additionally, content that is hidden/clipped in browser SVG rendering can appear or contribute to bounding box calculations in Fabric.

SVG

ISSUE

Error Message & Stack Trace

None (no thrown error). This is a rendering / bounds calculation issue.

[ab-etemadi]

@asturur this blocks our production SVG flow in v7.

SVG import ignores viewBox for bounds and scaling (repro attached).
Would really appreciate a look when you have a moment.

[asturur]

This is an old bug i think now with the group clipping is probably solvable leveraging the viewbox as a clipPath.

I have a large PR to look at then i should be able to give it a shot.

[ab-etemadi]

Hi @asturur, thanks for the quick response! I was able to fix this locally and wanted to share the workaround in case anyone else runs into this before the root issue is fixed upstream.

In short, the issue was caused by SVG clipPath/mask elements and inconsistent handling of viewBox during parsing.
The workaround flattens the SVG (removes clipPath/mask), loads it via loadSVGFromString, clears any remaining clipPaths on parsed objects, and then reapplies the SVG viewBox as a group-level clipPath so the content is clipped and sized correctly.

Full workaround code (complete)

import {
  Canvas,
  Group,
  Rect,
  FabricObject,
  loadSVGFromString,
  loadSVGFromURL,
  groupSVGElements,
} from 'fabric';

/**
 * Fetch SVG, flatten (strip clip/mask), parse with loadSVGFromString, clear clipPath on objects.
 * Falls back to loadSVGFromURL on fetch failure. Returns { objects, options } for groupSVGElements.
 * rawSvgText is included when fetch succeeded (e.g. for getDefaultObjDimensions).
 */
export async function loadAndPrepareSVG(svgURL: string): Promise<{
  objects: FabricObject[];
  options: Awaited<ReturnType<typeof loadSVGFromURL>>['options'];
  rawSvgText?: string;
}> {
  try {
    const res = await fetch(svgURL, { credentials: 'omit' });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const rawSvgText = await res.text();

    const flattenedSvgText = flattenSVGString(rawSvgText);

    const parsed = await loadSVGFromString(flattenedSvgText, undefined, {
      crossOrigin: 'anonymous',
    });

    parsed.objects.forEach((obj) => obj && clearClipPathAndMask(obj));

    return { objects: parsed.objects, options: parsed.options, rawSvgText };
  } catch {
    const parsed = await loadSVGFromURL(svgURL, undefined, {
      crossOrigin: 'anonymous',
    });

    parsed.objects.forEach((obj) => obj && clearClipPathAndMask(obj));

    return { objects: parsed.objects, options: parsed.options };
  }
}

/**
 * Apply viewBox as clipPath and set group size to viewBox so content fits the object border.
 * contentBoundsPre must be from getContentBounds(objects) *before* groupSVGElements (SVG coords).
 * Translates children so viewBox content is centered, then clips to group bounds (Figma-style).
 */
export function applyViewBoxClipToGroup(
  group: Group,
  _objects: FabricObject[],
  options: Awaited<ReturnType<typeof loadSVGFromURL>>['options'],
  contentBoundsPre: { minX: number; minY: number; width: number; height: number },
): void {
  const viewBoxW = options?.viewBoxWidth ?? options?.width ?? group.width ?? 1;
  const viewBoxH = options?.viewBoxHeight ?? options?.height ?? group.height ?? 1;

  // Fabric's options uses minX/minY; invert to get viewBox origin in SVG space
  const viewBoxX = -(options?.minX ?? 0);
  const viewBoxY = -(options?.minY ?? 0);

  // Group center in SVG coords (Fabric centers the group on the content bounds)
  const centerX = contentBoundsPre.minX + contentBoundsPre.width / 2;
  const centerY = contentBoundsPre.minY + contentBoundsPre.height / 2;

  const clipLeft = viewBoxX - centerX;
  const clipTop = viewBoxY - centerY;

  // Translate all children so the viewBox content sits at group center; then clip = group bounds
  const offsetX = -viewBoxW / 2 - clipLeft;
  const offsetY = -viewBoxH / 2 - clipTop;

  group.getObjects().forEach((obj) => {
    obj.set({
      left: (obj.left ?? 0) + offsetX,
      top: (obj.top ?? 0) + offsetY,
    });
  });

  group.setCoords?.();

  const viewportClip = new Rect({
    left: -viewBoxW / 2,
    top: -viewBoxH / 2,
    width: viewBoxW,
    height: viewBoxH,
    originX: 'left',
    originY: 'top',
    absolutePositioned: false,
  });

  group.clipPath = viewportClip;
  group.set({ width: viewBoxW, height: viewBoxH });
  group.dirty = true;
}

/**
 * Compute content bounds of parsed objects in SVG coordinates (before grouping).
 */
export function getContentBounds(objects: FabricObject[]): {
  minX: number;
  minY: number;
  width: number;
  height: number;
} {
  let minX = Infinity;
  let minY = Infinity;
  let maxX = -Infinity;
  let maxY = -Infinity;

  for (const o of objects) {
    const w = o.getScaledWidth?.() ?? (o as { width?: number }).width ?? 0;
    const h = o.getScaledHeight?.() ?? (o as { height?: number }).height ?? 0;

    const ox = originXNum(o);
    const oy = originYNum(o);

    const l = (o.left ?? 0) - ox * w;
    const t = (o.top ?? 0) - oy * h;

    minX = Math.min(minX, l);
    minY = Math.min(minY, t);
    maxX = Math.max(maxX, l + w);
    maxY = Math.max(maxY, t + h);
  }

  return {
    minX: Number.isFinite(minX) ? minX : 0,
    minY: Number.isFinite(minY) ? minY : 0,
    width: Number.isFinite(maxX - minX) ? maxX - minX : 0,
    height: Number.isFinite(maxY - minY) ? maxY - minY : 0,
  };
}

/** Origin as number for bounds: left=0, center=0.5, right=1 */
function originXNum(obj: FabricObject): number {
  const o = obj.originX;
  if (typeof o === 'number') return o;
  if (o === 'left') return 0;
  if (o === 'right') return 1;
  return 0.5;
}

function originYNum(obj: FabricObject): number {
  const o = obj.originY;
  if (typeof o === 'number') return o;
  if (o === 'top') return 0;
  if (o === 'bottom') return 1;
  return 0.5;
}

/**
 * Flatten SVG in code (mimics Figma: Flatten → export).
 * Removes clipPath, masks, and their references so Fabric sees real geometry only.
 */
export function flattenSVGString(svgText: string): string {
  if (typeof DOMParser === 'undefined' || typeof XMLSerializer === 'undefined') return svgText;

  const parser = new DOMParser();
  const doc = parser.parseFromString(svgText.trim(), 'image/svg+xml');
  if (doc.querySelector('parsererror')) return svgText;

  const removeAttrs = (el: Element) => {
    el.removeAttribute('clip-path');
    el.removeAttribute('clip-rule');
    el.removeAttribute('mask');

    const style = el.getAttribute('style');
    if (style) {
      const cleaned = style
        .replace(/\s*clip-path\s*:[^;]+;?/gi, '')
        .replace(/\s*clip-rule\s*:[^;]+;?/gi, '')
        .replace(/\s*mask\s*:[^;]+;?/gi, '')
        .trim();

      if (cleaned) el.setAttribute('style', cleaned);
      else el.removeAttribute('style');
    }
  };

  // remove defs nodes that define clip/mask
  doc.querySelectorAll('clipPath, mask').forEach((el) => el.remove());

  // remove refs on all nodes
  doc.querySelectorAll('*').forEach(removeAttrs);

  return new XMLSerializer().serializeToString(doc);
}

/** Clear clipPath (and nested group clipPaths) from parsed objects so only our viewport clip applies */
export function clearClipPathAndMask(obj: FabricObject): void {
  if ('clipPath' in obj && (obj as unknown as { clipPath?: unknown }).clipPath != null) {
    obj.set('clipPath' as keyof typeof obj, null);
  }

  if (
    'getObjects' in obj &&
    typeof (obj as unknown as { getObjects: () => FabricObject[] }).getObjects === 'function'
  ) {
    (obj as unknown as { getObjects: () => FabricObject[] }).getObjects().forEach(clearClipPathAndMask);
  }
}


/**
 * USAGE EXAMPLE (how it all ties together)
 */
export async function loadSvgAsClippedGroupAndCapture(
  url: string,
  canvasWidth: number,
  canvasHeight: number,
) {
  const { objects, options, rawSvgText: rawSvgTextFromLoad } = await loadAndPrepareSVG(url);

  // optional: if you still need raw SVG text for sizing logic
  let rawSvgText = rawSvgTextFromLoad ?? '';
  if (!rawSvgText) {
    rawSvgText = await fetch(url, { credentials: 'omit' })
      .then((r) => (r.ok ? r.text() : ''))
      .catch(() => '');
  }

  // filter as your app requires
  const filteredObjects = objects.filter(Boolean);

  const contentBoundsPre = getContentBounds(filteredObjects);

  const svg = groupSVGElements(filteredObjects, options) as Group;
  applyViewBoxClipToGroup(svg, filteredObjects, options, contentBoundsPre);

  const viewBoxW = options?.viewBoxWidth ?? options?.width ?? svg.width ?? 1;
  const viewBoxH = options?.viewBoxHeight ?? options?.height ?? svg.height ?? 1;

  const scaleX = canvasWidth / viewBoxW;
  const scaleY = canvasHeight / viewBoxH;

  svg.set({
    scaleX,
    scaleY,
    hoverCursor: 'default',
    originX: 'center',
    originY: 'center',
  });

  // you had these in your app
  const colors = identifyAndExtractSVGColors(filteredObjects);
  const imageId = '...';

  const background = {
    imageId,
    colors,
  };

  return { svg, background, rawSvgText };
}

/**
 * Placeholder: your existing function
 * (keep your implementation)
 */
declare function identifyAndExtractSVGColors(objects: FabricObject[]): unknown;

[MassoudFSharifi]

@asturur waiting for the issue to be resolved

[iFiz]

I've ran into a similar issue and wrote a custom LayoutManager to circumvent this. I wanted to share this, but didn't get around to doing so before. Maybe this could help you as well?

It seems to give the results you're looking for in the CodePen, but I'm not familiar with your exact requirements - If anything it could hopefully serve as a starting point: https://codesandbox.io/p/sandbox/vanilla-forked-qtmdry

import {
  classRegistry,
  LayoutStrategy,
  LayoutStrategyResult,
  Point,
} from "fabric";

/**
 * A LayoutStrategy that forces a fixed size for the container,
 * regardless of whether the objects inside protrude.
 */
export class FitCroppedContentLayoutStrategy extends LayoutStrategy {
  static readonly type = "fit-cropped-content";

  private readonly layoutWidth: number;

  private readonly layoutHeight: number;

  constructor(options: { layoutHeight: number; layoutWidth: number }) {
    this.layoutWidth = options.layoutWidth;
    this.layoutHeight = options.layoutHeight;
  }

  calcBoundingBox(): LayoutStrategyResult | undefined {
    return {
      center: new Point(this.layoutWidth / 2, this.layoutHeight / 2),
      size: new Point(this.layoutWidth, this.layoutHeight),
    };
  }
}

// Not sure if this is needed?
classRegistry.setClass(FitCroppedContentLayoutStrategy);

[asturur]

@asturur waiting for the issue to be resolved

You'll have to wait sadly because i have a CVE to solve, then a large PR that is waiting inline for cropping, then i can move to this.

[asturur]

@iFiz the issue with layoutStrategy is that it needs caching to avoid items going out of bound. While if we add a clipPath we should be sure that caching is enforced by that or at least something has to ensure us that items do not escape the group box.