Using path to SVG file as image src doesn't work

[twitcher07]

Hi, First of all let me say I have loved using Fancybox version 4. I'm really happy with the features and glad it doesn't require jQuery anymore.

However I ran into a bug when trying to show a SVG file in fancybox when using the method of Fancybox.show().

You can see my working example that shows it won't show the SVG like the other image here: https://codepen.io/twitcher/pen/jOGEvWO

[fancyapps]

Hi,

Can you edit your SVG file and add width and height attributes? Right now, it only has viewBox="0 0 600 500", but if you would add, for example, width="600" height="500", then it would start working fine.

[twitcher07]

Ok. I just tried that and it is showing the svg now.

Is there not a way to pass the width and height along with image object? I assumed I could pass any of the usual data attributes in the object. For instance I originally tried to do:

const allImages = {
  0: [
    {
      src: 'https://panamaflatsapts.com/uploads/floorplans/Panama-Flats-2D-Floorplans-Pier-Studio.svg',
      type: 'image',
      width: 600, // tried this since I couldn't do "data-width"
      height: 500, // tried doing this since I couldn't do "data-height"
      caption: 'testing svg'
    },
    {
      src: 'https://picsum.photos/id/237/960',
      type: 'image',
      caption: 'testing image'
    }
  ]
}

[fancyapps]

Hi,

Sorry, I forgot to add data-width and data-height support to images. It is included in the latest release. Example:

<a
  data-fancybox="gallery"
  data-width="1600"
  data-height="1500"
  data-src="https://panamaflatsapts.com/uploads/floorplans/Panama-Flats-2D-Floorplans-Pier-Studio.svg"
>
  <img
    width="200"
    src="https://panamaflatsapts.com/uploads/floorplans/Panama-Flats-2D-Floorplans-Pier-Studio.svg"
  />
</a>

But, since I forgot about these attributes when I was designing all components (Fancybox is build on top of the Carousel), there is a variable naming collision. Therefore I had to choose something different when using Fancybox.show(). I simply added _ prefix to width and height variables. So, you have to do like this when using API:

Fancybox.show([
  {
    src:
    "https://panamaflatsapts.com/uploads/floorplans/Panama-Flats-2D-Floorplans-Pier-Studio.svg",
    type: "image",
    _width: 1600,
    _height: 1500,
  },
]);

Demo - https://fancyapps.com/playground/1ne

[twitcher07]

Ok! that's good for me to know. I appreciate your help.