-
Posts
-
Hi guys,
Tight deadline on this one (today) need to incorporate an SVG graphic that contains multiple logos, each with different links. See examples below.
I’m using layout elements instead of an actual footer, because the site only has a few pages, and it’s easier to manipulate.
Already have the SVG, and I’m comfortable making it responsive, just need to know the easiest way to copy (or create) their usemap for the links.
I tried these SVG plugins so far :
- https://wordpress.org/plugins/svg-support/
- https://wordpress.org/plugins/scalable-vector-graphics-svg/
None of them seem to work with Enfold though. Do you know of any SVG enabling plugins that do?
I’ve used Image, Text and Code block elements to place the SVG with no luck.
Thoughts?
Ok, coupla things for those finding this thread and frustrated with SVG implementing in WP
- https://wordpress.org/plugins/svg-support/ <- this works, just make sure to add width & height attributes (duh!)
- Use either a Text Element for placement (for easy alignment options) or Code Block
Image Map <- Still need a solution for this.
Any help with the last yard on this one? Almost there, just not quite. Need help with the Image / Use Map / Links solution.
Hi!
Sorry for the delay. When you bump your tickets the system thinks it’s answered and pushes the ticket off the queue. In case of urgent help request you to kindly wait till we reply. We reply to all the tickets asap.
Coming to the issue… To include the external svg if you right click on it and inspect you get this link then you can insert it in a text widget and customise its color and size.
<img src="http://www.amc.com/wp-content/themes/amc-tv/assets/images/AMC_Logo_White.svg">Regards,
VinayHi Vinnie,
Thanx for the info. I’m already able to use it on the site. What I need to do is have an independent copy of it to exist on the other site, and have it complete with the multiple links. Note how all the logos have different links. What’s the best way to copy that or set up multiple links on an SVG? Thanx!
~ Michael
Hey!
Copy the whole code:
<img id="logo-train" src="http://www.amc.com/wp-content/themes/amc-tv/assets/images/logotrains/amcn-logotrain-desktop.svg" border="0" width="689" height="52" orgwidth="689" orgheight="52" usemap="#amcn_logo_train" alt=""> <map name="amcn_logo_train" id="amcn_logo_train"> <area alt="AMC Networks" title="AMC Networks" href="http://www.amcnetworks.com/" rel="nofollow" shape="rect" coords="1,1,153,55" style="outline:none;" target="_blank"> <area alt="AMC" title="AMC" href="http://www.amc.com/" rel="nofollow" shape="rect" coords="164,9,218,42" style="outline:none;" target="_blank"> <area alt="BBC America" title="BBC America" href="http://www.bbcamerica.com/" rel="nofollow" shape="rect" coords="228,10,276,42" style="outline:none;" target="_blank"> <area alt="IFC" title="IFC" href="http://www.ifc.com/" rel="nofollow" shape="rect" coords="288,11,331,42" style="outline:none;" target="_blank"> <area alt="Sundance TV" title="Sundance TV" href="http://www.sundance.tv/" rel="nofollow" shape="rect" coords="340,11,425,42" style="outline:none;" target="_blank"> <area alt="WE tv" title="WE tv" href="http://www.wetv.com/" rel="nofollow" shape="rect" coords="434,9,470,41" style="outline:none;" target="_blank"> <area alt="IFC Films" title="IFC Films" href="http://www.ifcfilms.com/" rel="nofollow" shape="rect" coords="478,9,573,43" style="outline:none;" target="_blank"> <area alt="AMC Networks International" title="AMC Networks International" rel="nofollow" href="http://www.amcnetworks.com/amcni" shape="rect" coords="580,10,691,44" style="outline:none;" target="_blank"> </map>Best regards,
Ismael
- You must be logged in to reply to this topic.