-
Posts
-
Great theme! So far, I have been using the <OBJECT> tag within Code Blocks to insert SVG images that contain embedded links, which works well across browsers. [ The less convenient method I found is creating a link map with the “usemap” attribute within the IMG tag, but IE 9/10/11 do not properly scale SVG images using IMG tags ]
Non-interactive SVG images (without embedded links) work fine inside the Enfold image media element, and are properly responsive on all browsers I have tested. I am using the “SVG Support” WordPress plugin.
It would be very convenient to also insert SVG images (containing embedded links) using the Enfold image media element, but when I do so, any embedded links do not function — is there a way to enable the embedded SVG links?
Thanks,
Pauli use svg-support too. It is nice to see preview images on media-library.
on most cases i do insert on svg-support settings css-class to target. and insert on enfold: avia_image
because every img file inserted via image alb element gets this class on enfold. So if there is a svg file – it will be replaced by the file_get_contents so the svg itself.
i never tested your embeded links – where do you set these ?
can you post here a code how it would look in the svg file?
you can give the img itself a link – but this you know.PS : the lightbox does not work with svg’s and image alb element
Hi there, as a live example, see: https://skkynet.com/
The top-most image is a plain or ‘non-interactive’ SVG, inserted as a background in an Enfold color section — ideally, I would like to be able to have functioning SVG links within this image.
Right below the four buttons, look at ‘customers-map.svg’ showing a bunch of logos — some are hyperlinked to case studies. The embedded URLs can be easily added using InkScape or Adobe Illustrator, or by directly editing the SVG file in your favourite text editor. In this example, search inside this SVG for ‘a xlink:ref’ arguments.
To insert this interactive SVG in a code block element:
<object style="width: 100%" type="image/svg+xml" class="responsive-image" data="/media/customers.svg">Your browser does not support SVGs</object>With CSS:
.responsive-image { width: 100%; height: auto; }PS. I believe lightbox is disabled site-wide, if memory serves me.
you see here the svg with text :
it is placed as an image-alb not as background-image
because i added svg support to every avia_image the svg is inserted: https://webers-testseite.de/popup-contact-formelement/and for example the “orange path” is a link to my homepage
this will work nice – Hover the path of the svg – but as background-image it is not inserted as svg itself i guess.
Your “Logo Text” SVG image is exactly what I want to achieve! However, have you tested this with other web browsers?
Firefox: displays interactive SVG as intended, links work fine
Chrome: SVG does not display
Safari: SVG does not display
Internet Explorer: displays 150px tall (known issue, as I noted above in OP); without mouse-hover animation; links work
Edge: displays at an intermediate size (not full column-width, like in Firefox); also without mouse-hover animation; links workIs there another solution that is cross-browser compatible?
Hi,
How does it display on Chrome?
SVG is supported to chrome almost 2 years ago, are you sure you check it right?Best regards,
BasilisAre you referring to my first post? All current modern browsers (including Chrome) work fine using OJBECT tag; not all browsers do using IMG tag (specifically, Internet Explorer 11).
As for demo page Guenni007 posted, check it using Chrome (Version 65.0.3325.181 (Official Build) (64-bit) on Windows 10 PC — no SVG is rendered (despite the SVG code showing under the browser inspector):
sorry – i should start to implement to the svg width and height.
without there is a need to make it via css. Now it should be seen on all browsers –
but i don’t know why css filter : drop-shadow does not work on chrome nor safari – allthough i setup a -webkit- rule
the fill rule works on hovering ?but now to your svg –
i only see normal links to clip-path not one xlink in it.
the<g clip-path="url(#a)" …is something totaly differentso i downloaded your svg file and have to beautify it first to see the code a bit more readable.
the header of the svg is not quite standard.placing a xlink on a path would cause xml errors.
you can see the code on the link yourself.:
https://webers-testseite.de/asdfgadfg/
btw: i inserted a link on that little light bulb at the left (pointer will change to hand)
here is the way i made it :
you can define for each path a link (and a title) or group some path<a xlink:href="https://guenterweber.com" xlink:title="here it goes to my homepage" target="_blank"> <path d="M141.365 83.566c-6.127 0-11.09-5.764-11.09-12.872 0-7.109 4.963-12.872 11.09-12.872 6.125 0 11.09 5.763 11.09 12.872 0 7.108-4.965 12.872-11.09 12.872" fill="#9eb4ca"/> <path d="M158.934 53.806l-.111-.144-1.631-2.907c-2.096 2.157-5.11 3.515-8.465 3.515h-4.477v-2.288c0-.371-.316-.686-.761-.816l1.004-9.84-3.127-2.003-3.127 2.004 1.004 9.839c-.45.13-.764.445-.764.816v2.273l.002.015H134c-3.354 0-6.37-1.358-8.467-3.513l-1.54 2.744-.203.305c-2.86 3.729-4.566 11.074-4.566 16.022 0 12.208 9.93 22.143 22.139 22.143 12.21 0 22.144-9.935 22.144-22.143 0-4.948-1.713-12.293-4.574-16.022m-17.57 43.274c-15.026 0-27.252-12.222-27.252-27.252 0-5.804 1.894-14.143 5.51-18.98L130.3 31.82h22.13l10.675 19.028c3.619 4.837 5.512 13.176 5.512 18.98 0 15.03-12.225 27.252-27.252 27.252m10.041-68.474h-20.082a3.023 3.023 0 1 1 0-6.044h20.082a3.022 3.022 0 0 1 0 6.044m-21.465-11.81c0-4.645 5.121-8.407 11.436-8.407 6.318 0 11.437 3.762 11.437 8.407v2.644h-22.873z" fill="#9eb4ca"/> </a>for having cursor pointer – even on chrome you had to put in quick css:
path { pointer-events: all !important } a path:hover { cursor: pointer }
- You must be logged in to reply to this topic.