Add setting that shows viewBox

[peterkimga]

HI

I love the extension. I recommend it to everyone that wants to work with SVG, but...

There is no way to see where your viewBox is actually positioned.

It's actually important to what I'm doing and it's a little annoying but will sort me out completely.

I just need to see like in illustrator or something where the working canvas is.

Can be with a setting or by default.

Thanks. Regards.
Peter

[vincerubinetti]

Commenting to say this would absolutely amazing. Some type of dotted line guides for the viewbox and also the axes at center/origin of the image would really help a lot.

[vincerubinetti]

You can almost achieve this by using the settings like this:

"svgPreview.style": {
    "img": {
      "background-position": "0 0, 10px 10px",
      "background-size": "20px 20px",
      "background-image": "linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414), linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414)"
    }
  }

Basically applying a background or some kind of boundary indicator to the image within the preview (img) rather than the preview window itself (html).

However, in order for this to work -- for the checkerboard to properly reflect the actual location and size of the viewbox -- you have to disable the "scale to fit" option, and close and reopen the preview any time you make a change to viewBox. But that's a rough procedure to do if you have to tweak the viewBox attribute a lot.

@SimonSiefke we could use your help here

[SkyOps117]

You can almost achieve this by using the settings like this, though testing it out, it has some odd behaviors when changing the viewBox:

"svgPreview.style": {
    "img": {
      "background-position": "0 0, 10px 10px",
      "background-size": "20px 20px",
      "background-image": "linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414), linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%, #141414)"
    }
  }

Basically applying a background or some kind of boundary indicator to the image within the preview (img) rather than the preview window itself (html).

@SimonSiefke we could use your help here

Using "background": "#ffffff" inside the "img" does it better for me. Now when changing the vewBox it update correctly =D

[vincerubinetti]

@SkyOps117 Changing the aesthetic style of the background doesn't change the problems.

There's clearly something going wrong with this extension's updating of the width/height properties, and/or a problem with the CSS causing the <img> to not properly fit to the contained .svg file's viewbox.

[SkyOps117]

@vincerubinetti I saw that "svgPreview.scaleToFit":true made the image stretch if it's not a square so, I disable it. Only problem now with it at false is we have to adjust zoom everytime. Thanks for helping me understand settings more by the way =D