-
Posts
-
When I am in the hotspot element I can not see the SVG and therefore can not see where to place the hotspot markers. I tried looking through the forums and Googling for a workaround to use an SVG as the image file format within the Image with Hotspots elements, is this possible?
Hey lzevon,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaAny way we can take a look at this? The ability to use an SVG in a hotspot element is important for this and another site I’m working on.
every svg image is handled in media-library as if it has dimension of 0 x 0 px
so you had to give an absolute width on that svg to have better browser support:e.g.:
img[src*="svg"] {width: 2000px }and let the visible width decide the surrounding container.
If you have inline svg it is similar to that.
BUT: yes, even if this works the first time you edit it – if you try to edit the image again, the svg will be deleted from the preview.
Hi lzevon,
Did you get it working with Guenni007’s help or do you need more help?
Best regards,
VictoriaI haven’t Victoria. This is in an Image with Hotspots element and I tried giving it a custom class. I use SVG for the logo on most of my sites and was aware of giving it a width, but can not get it to work with the custom class in this element. I tried…
.svg-img-test { width: 900px; } and .svg-img-test { width: 900px !important; } without success. After Guenni007’s response I then tried (currently in place) .svg-img-test[src$=”.svg”] { width: 900px !important; } and then: .svg-img-test img[src$=’.svg’] { width: 900px !important; } with no luck.I would like. to use an SVG in an Image with Hotspots element if possible.
What i see is – even if you got it working on the frontend – it is a problem in the backend still.
It works with my code above once – you see the picture in the preview and can place the hotspots. You can also save it and as said before in the frontend everything will be fine.
But editing the element again makes the picture disappear. You have to set it again to be able to work on it again. – So this is a bug indeed.My advice concerning to svg is to install that little plugin svg support.
– now to your css problematic. You have to set a width to the img itself – but if you gave a custom-class to an image alb f.e. the custom-class is at one “grand” parent container: avia-image-container
so in this case the selector will be: .avia-image-container.svg-img-test img
on you last trial this was right – so better to see your page to look for the right selector______
I would like. to use an SVG in an Image with Hotspots element if possible.
but that means : you like to have a svg img as the base of the hotspot image – or do you want a svg in the hotspot itself?
Thanks @Guenni007 I installed the plugin and that made a world of difference. I usually try to avoid plugins when I can insert simple functions (as I did to support the ability to upload SVG), but can now see I needed it to help display the image inside the Image with Hotspots element. Better overall support of SVG is hopefully forthcoming with this theme I like so much.
Thanks again.
Hi lzevon,
Thanks for the update, so everything is working as it should now then? Thanks @guenni007 for helping out :-)
Best regards,
Rikardif you switch to the advanced mode of the plugin you can have a trigger ( default is style-svg ) – on this the img src svg will be replaced by the svg itself (inline svg) sometimes this is very usefull.
Good to know @guenni007 thank you! And Rikard I’m all set. Thanks all!
- The topic ‘SVG for image with hotspots element’ is closed to new replies.