SVG link as object not via JS

Question

Hello! The question is: I have a svg file, there is a company logo. He has a couple of styles. I insert it into HTML through object, since different effect: hover does not work. I faced the problem that now I can’t assign the link to the main page of the site correctly. Where can there be a mistake?

This is the code of the SVG file, it is external.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="14.93" viewBox="0 0 78 14.93"><defs> <style type="text/css"> svg { fill: #000; transition: fill 0.1s;} svg:hover { fill: #4e86b1; } </style></defs><title>an-logo-white</title><g id="Слой 2" data-name="Слой 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M68,14.32h5a5,5,0,0,0,0-10V6.46a2.86,2.86,0,0,1,.24,5.71H70.1V0H68Z"/><path class="cls-1" d="M66.91,11.94V4.32h-5a5,5,0,0,0,0,10V12.19a2.86,2.86,0,0,1-.24-5.71h3.14v5.46Z"/><path class="cls-1" d="M12.45,5.91H10V4.85h4V3.77H8.58V9.5h3.9c1.36,0,2-.35,2-1.79S13.81,5.91,12.45,5.91Zm-.13,2.45H10V7h2.42c.71,0,.78.21.78.64S13.06,8.36,12.32,8.36Z"/><path class="cls-1" d="M5.07,3.77H3L0,9.5H1.6l.74-1.45H5.73L6.47,9.5H8.08ZM2.9,7,4,4.84h.07L5.18,7Z"/><path class="cls-1" d="M19.66,8.36H17.9c-.78,0-1.1-.16-1.1-1V5.9c0-.9.19-1.06,1.1-1.06h1.76c.79,0,1.1.26,1.1.86h1.37c0-1.61-.85-2-2.2-2H17.64c-1.68,0-2.22.47-2.22,2.15V7.47c0,1.53.5,2,2.09,2h2.55c1.69,0,2.06-.46,2.07-2H20.75C20.75,8.21,20.47,8.36,19.66,8.36Z"/><path class="cls-1" d="M27.61,3.7H25.1c-1.56,0-2.11.47-2.11,2v1.8c0,1.39.58,2,2.11,2h2.52c1.6,0,2.07-.53,2.07-2V5.74C29.68,4.13,29,3.7,27.61,3.7Zm.7,3.69c0,.78-.2,1-1.07,1H25.43c-.83,0-1.07-.21-1.07-1V5.87c0-.82.24-1,1.1-1h1.77c.82,0,1.1.19,1.1,1Z"/><path class="cls-1" d="M31.06,7.26c0,.83-.13,1.1-.84,1.1V9.5h.58c1,0,1.63-.61,1.63-2.08V4.91h3.22V9.5H37V3.77h-6Z"/><path class="cls-1" d="M45.33,3.7H42.81c-1.56,0-2.11.46-2.11,2V6H39.32V3.77H37.95V9.5h1.37V7.1H40.7v.44c0,1.39.58,2,2.11,2h2.52c1.6,0,2.07-.53,2.07-2V5.73C47.4,4.12,46.75,3.7,45.33,3.7ZM46,7.39c0,.78-.2,1-1.07,1H43.14c-.83,0-1.07-.21-1.07-1V5.87c0-.82.24-1,1.1-1h1.76c.82,0,1.1.19,1.1,1Z"/><polygon class="cls-1" points="48.19 3.77 48.19 4.91 50.58 4.91 50.58 9.5 51.95 9.5 51.95 4.91 54.36 4.91 54.36 3.77 48.19 3.77"/><path class="cls-1" d="M.7,12.47H2.47v-1.1h.69v2.87H2.47V13H.7v1.2H0V11.37H.7Z"/><path class="cls-1" d="M4.21,11.37H7.15v.54H4.9v.63H7.08V13H4.9v.66H7.15v.54H4.21Z"/><path class="cls-1" d="M8.62,12.74V11.37H11.5v2.3h.32v1.26h-.62v-.69H8.71v.69H8.08V13.67h.19A1.16,1.16,0,0,0,8.62,12.74Zm2.18-.8H9.28v.94a1.27,1.27,0,0,1-.23.79h1.76Z"/><path class="cls-1" d="M12.76,11.37h2.07c.64,0,1,.19,1,.72s-.12.56-.36.64a.59.59,0,0,1,.47.67c0,.62-.31.84-1,.84H12.76Zm.69,1.16h1.4c.19,0,.28-.14.28-.34a.26.26,0,0,0-.29-.29h-1.4Zm0,1.17h1.38c.37,0,.42-.08.42-.34s0-.32-.39-.32h-1.4Z"/><path class="cls-1" d="M17.7,13.67h.1l1.75-2.3H20.7v2.87H20v-2.3h-.09l-1.73,2.3H17V11.37h.69Z"/><path class="cls-1" d="M24.2,13h-.35l-1.25,1.23h-.92l1.58-1.53-1.51-1.35h1l1.13,1.07h.34V11.37h.69v1.07h.34l1.13-1.07h1l-1.51,1.35,1.58,1.53h-.92L25.24,13h-.36v1.23H24.2Z"/><path class="cls-1" d="M29.09,13.67h.1l1.75-2.3h1.15v2.87h-.69v-2.3h-.1l-1.73,2.3H28.4V11.37h.69Z"/><path class="cls-1" d="M34.49,11.37l1,2.3h0l1-2.3h1.28v2.87H37v-2.3h-.09l-1,2.3H35l-1-2.3H33.9v2.3h-.69V11.37Z"/><path class="cls-1" d="M41.08,14.24H39.81c-.77,0-1.06-.29-1.06-1v-.9c0-.79.28-1,1.06-1h1.26c.71,0,1,.22,1,1v.9C42.11,14,41.88,14.24,41.08,14.24ZM40,13.67h.91c.44,0,.54-.09.54-.48v-.76c0-.42-.14-.51-.55-.51H40c-.43,0-.55.11-.55.52v.77C39.44,13.57,39.56,13.67,40,13.67Z"/><path class="cls-1" d="M46.45,13.25c0,.77-.19,1-1,1H44.13c-.79,0-1-.24-1-1v-.82c0-.84.27-1.08,1.11-1.08h1.14c.68,0,1.11.19,1.11,1h-.69c0-.3-.15-.43-.55-.43h-.88c-.46,0-.55.08-.55.53v.71c0,.44.16.52.55.52h.88c.41,0,.55-.07.55-.42Z"/><path class="cls-1" d="M50.46,11.37v.57H49.25v2.3h-.69v-2.3h-1.2v-.57Z"/><path class="cls-1" d="M52,11.37v1.07h1.25c.68,0,1,.17,1,.9s-.34.9-1,.9h-2V11.37Zm0,2.3h1.19c.37,0,.42-.08.42-.33s0-.32-.39-.32H52Z"/></g></g></svg>

This is the code (short) of the place where this file is used:

 <html> <body> <a href="" class="b-header_menu_nav__logo_absolut"> <object type="image/svg+xml" data="img/Absolut-Logo.svg">Your browser does not support SVGs</object> </a> </body> </html>

Naturally, instead of the caption, my image appears, but I cannot control it in any way, neither the cursor appears, nor the link to follow (which is wrapped). Suppose the problem with the cursor can be solved safely through css. But about the link is a question. If do

 <a xlink:href="http://Yandex.ru/"> <text x="20" y="20">SVG-cсылка на главную страницу</text> </a>

Without specifying the target, the INSTEr object page appears. Well, in short, I can not understand what I am doing wrong.

Accepted Answer · 2017-09-29T14:36:53

Link to external resource from SVG file

This method is the most reliable, but with one mandatory condition - the ability to edit the svg file. And you have such an opportunity - you have the file: Absolut-Logo.svg

Sequencing

Take the file, which added a link to an external resource. I do not know where you need to follow the link, so I made a switch to an article on svg wikipedia for example.
<a href="http://ru.wikipedia.org/wiki/SVG" target="_blank"> ... </a>

below is the full code of the file "Absolut-Logo.svg"

UPD 09/30/2017

The code of the file is changed, download it again and upload it to your resource. The image is not visible (it is white), but it will appear when adding a background in the html page, see the example below.

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="14.93" viewBox="0 0 78 14.93"> <defs> <style type="text/css"> svg path {fill:inherit; stroke:inherit;} #logo { fill: #fff; transition: fill 0.1s; } #logo:hover { fill: #4e86b1; } </style> </defs> <title>an-logo-white</title> <a href="http://ru.wikipedia.org/wiki/SVG" target="_blank"> <g id="logo"> <rect width="78" height="14.93" fill="none"/> <path class="cls-1" d="M68,14.32h5a5,5,0,0,0,0-10V6.46a2.86,2.86,0,0,1,.24,5.71H70.1V0H68Z"/><path class="cls-1" d="M66.91,11.94V4.32h-5a5,5,0,0,0,0,10V12.19a2.86,2.86,0,0,1-.24-5.71h3.14v5.46Z"/><path class="cls-1" d="M12.45,5.91H10V4.85h4V3.77H8.58V9.5h3.9c1.36,0,2-.35,2-1.79S13.81,5.91,12.45,5.91Zm-.13,2.45H10V7h2.42c.71,0,.78.21.78.64S13.06,8.36,12.32,8.36Z"/><path class="cls-1" d="M5.07,3.77H3L0,9.5H1.6l.74-1.45H5.73L6.47,9.5H8.08ZM2.9,7,4,4.84h.07L5.18,7Z"/><path class="cls-1" d="M19.66,8.36H17.9c-.78,0-1.1-.16-1.1-1V5.9c0-.9.19-1.06,1.1-1.06h1.76c.79,0,1.1.26,1.1.86h1.37c0-1.61-.85-2-2.2-2H17.64c-1.68,0-2.22.47-2.22,2.15V7.47c0,1.53.5,2,2.09,2h2.55c1.69,0,2.06-.46,2.07-2H20.75C20.75,8.21,20.47,8.36,19.66,8.36Z"/><path class="cls-1" d="M27.61,3.7H25.1c-1.56,0-2.11.47-2.11,2v1.8c0,1.39.58,2,2.11,2h2.52c1.6,0,2.07-.53,2.07-2V5.74C29.68,4.13,29,3.7,27.61,3.7Zm.7,3.69c0,.78-.2,1-1.07,1H25.43c-.83,0-1.07-.21-1.07-1V5.87c0-.82.24-1,1.1-1h1.77c.82,0,1.1.19,1.1,1Z"/><path class="cls-1" d="M31.06,7.26c0,.83-.13,1.1-.84,1.1V9.5h.58c1,0,1.63-.61,1.63-2.08V4.91h3.22V9.5H37V3.77h-6Z"/><path class="cls-1" d="M45.33,3.7H42.81c-1.56,0-2.11.46-2.11,2V6H39.32V3.77H37.95V9.5h1.37V7.1H40.7v.44c0,1.39.58,2,2.11,2h2.52c1.6,0,2.07-.53,2.07-2V5.73C47.4,4.12,46.75,3.7,45.33,3.7ZM46,7.39c0,.78-.2,1-1.07,1H43.14c-.83,0-1.07-.21-1.07-1V5.87c0-.82.24-1,1.1-1h1.76c.82,0,1.1.19,1.1,1Z"/><polygon class="cls-1" points="48.19 3.77 48.19 4.91 50.58 4.91 50.58 9.5 51.95 9.5 51.95 4.91 54.36 4.91 54.36 3.77 48.19 3.77"/><path class="cls-1" d="M.7,12.47H2.47v-1.1h.69v2.87H2.47V13H.7v1.2H0V11.37H.7Z"/><path class="cls-1" d="M4.21,11.37H7.15v.54H4.9v.63H7.08V13H4.9v.66H7.15v.54H4.21Z"/><path class="cls-1" d="M8.62,12.74V11.37H11.5v2.3h.32v1.26h-.62v-.69H8.71v.69H8.08V13.67h.19A1.16,1.16,0,0,0,8.62,12.74Zm2.18-.8H9.28v.94a1.27,1.27,0,0,1-.23.79h1.76Z"/><path class="cls-1" d="M12.76,11.37h2.07c.64,0,1,.19,1,.72s-.12.56-.36.64a.59.59,0,0,1,.47.67c0,.62-.31.84-1,.84H12.76Zm.69,1.16h1.4c.19,0,.28-.14.28-.34a.26.26,0,0,0-.29-.29h-1.4Zm0,1.17h1.38c.37,0,.42-.08.42-.34s0-.32-.39-.32h-1.4Z"/><path class="cls-1" d="M17.7,13.67h.1l1.75-2.3H20.7v2.87H20v-2.3h-.09l-1.73,2.3H17V11.37h.69Z"/><path class="cls-1" d="M24.2,13h-.35l-1.25,1.23h-.92l1.58-1.53-1.51-1.35h1l1.13,1.07h.34V11.37h.69v1.07h.34l1.13-1.07h1l-1.51,1.35,1.58,1.53h-.92L25.24,13h-.36v1.23H24.2Z"/><path class="cls-1" d="M29.09,13.67h.1l1.75-2.3h1.15v2.87h-.69v-2.3h-.1l-1.73,2.3H28.4V11.37h.69Z"/><path class="cls-1" d="M34.49,11.37l1,2.3h0l1-2.3h1.28v2.87H37v-2.3h-.09l-1,2.3H35l-1-2.3H33.9v2.3h-.69V11.37Z"/><path class="cls-1" d="M41.08,14.24H39.81c-.77,0-1.06-.29-1.06-1v-.9c0-.79.28-1,1.06-1h1.26c.71,0,1,.22,1,1v.9C42.11,14,41.88,14.24,41.08,14.24ZM40,13.67h.91c.44,0,.54-.09.54-.48v-.76c0-.42-.14-.51-.55-.51H40c-.43,0-.55.11-.55.52v.77C39.44,13.57,39.56,13.67,40,13.67Z"/><path class="cls-1" d="M46.45,13.25c0,.77-.19,1-1,1H44.13c-.79,0-1-.24-1-1v-.82c0-.84.27-1.08,1.11-1.08h1.14c.68,0,1.11.19,1.11,1h-.69c0-.3-.15-.43-.55-.43h-.88c-.46,0-.55.08-.55.53v.71c0,.44.16.52.55.52h.88c.41,0,.55-.07.55-.42Z"/><path class="cls-1" d="M50.46,11.37v.57H49.25v2.3h-.69v-2.3h-1.2v-.57Z"/><path class="cls-1" d="M52,11.37v1.07h1.25c.68,0,1,.17,1,.9s-.34.9-1,.9h-2V11.37Zm0,2.3h1.19c.37,0,.42-.08.42-.33s0-.32-.39-.32H52Z"/> </g> </a> </svg>

Place this file on your server. In my version, I posted a file on the site svg-art.ru
https://svg-art.ru/files/Absolut-Logo.svg
Add a call to an external svg file from your html page

UPD 09/30/2017

The picture is white on a gray background

 <style> body { background:#d3d3d3; } </style> <object type="image/svg+xml" data=" https://svg-art.ru/files/Absolut-Logo.svg">Your browser does not support SVGs</object>

For example, calling external svg with jsfiidle

If you do everything exactly according to the instructions of this post, then everything should work for you. If it does not work, look for errors in the layout. Here and elsewhere everything works.

All conditions are met, but the picture became black, instead of white (which was originally), and a white background appeared.
And not a single style used inside the file itself is working as normal.
I will do it, but then, in order to see the white image, you need to add a colored background.
@Gwai picture has become white, there is no background in the svg file.
If you want to add a background to the svg file, correct the line <rect width = "78" height = "14.93" fill = "none" /> Now you can see the image to add a background in the html file body {background: # d3d3d3;} I hope my the labors will be marked, and so I spent a lot of time on you.

Answer 2 · 2017-09-25T15:52:42

There are two options to make the svg image clickable:

#one

Replace the <object> with <img>

 <img src="img/Absolut-Logo.svg" width="78" height="14.93" alt="image description">

the option for browsers that do not perceive svg is changed to the * .png file

  <img src="img/Absolut-Logo.svg" onerror="this.onerror=null; this.src='img/Absolut-Logo.png'">

more here

# 2

Since the <object> content link works only when it is inactive, you must specify in the css properties of the pointer-events: none;

 a{ display: inline-block; } object{ pointer-events: none; }

 <a href="https://www.google.ru" target="_blank"> <object data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" type="image/svg+xml"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png" style=" width: 250px;"/> </object> </a>

http://jsfiddle.net/energee/UL9k9/

The portal logo in the header and the Absolute logo in the menu are implemented as external SVGs.
ABSOLUTE (in question) I embed only through OBJECT to make a hover effect on this EXTERNAL file.
Exactly because SVG is EXTERNAL, it’s impossible for me to wrap the whole thing in a normal link.
Look carefully, since I cannot place your svg file on an external resource, I took someone else's svg file, wrapped it like you wanted in object and add it to html and simultaneously from there I call another resource by reference, you can do the same (call internal pages or other resources) look at the jsfiddle.net/energee/UL9k9 example . The decision that I suggested to you is absolutely working, I did not invent it, the whole world uses it. And in the end, it’s accepted to thank for the time spent by someone else
The HOVER effect does not work on such an element (if svg is connected) with your version.
If you do not do such a substitution - then the link does not work.
My task is clearly spelled out, only an SVG file and only an external connection.
The link can be shoved into the SVG itself, it works there, but with the HOVER effect, it starts to mess up and when you hover over the object, a completely different effect is obtained.

SVG link as object not via JS

2 answers 2

Link to external resource from SVG file

UPD 09/30/2017

UPD 09/30/2017

#one

# 2

More articles: