Skip to main content
T
timstring
Participating Frequently
April 6, 2018
Answered

Put a link in an svg file

  • April 6, 2018
  • 2 replies
  • 3933 views

I am completely and utterly lost.  Everything I have seen so far is totally barbar to me.  I need an explanation in simple terms.  I want to make a link in a specific region of an SVG file.  I do know this:  I need the region's  coordinates and thel target link.  What I want to accomplish is if a person hovers the mouse over the phone number, I want something to pop up that says:  "Click here to call," and if he does, I want to send the "tel://9038302844" link.  Same for the email.   So, here's the info:

Phone # coordinates:  x = 745px, y= 508 px    width = 775px, height = 224px

HELP!!

This topic has been closed for replies.
Correct answer BenPleysier

The picture you are seeing on my original post is an .svg FILE!!  It is not created with the SVG tag.  It is created by a graphics app.  The phone number itself was created with an app that folds, spindles, an mutilates text.

There is no text to wrap a link element around.  I need the region around the phone number and email to be clickable, hence the coordinates.  Would someone point me toward a tutorial that shows how to do this?

pziecina, please do not be condescending.  I more than likely have been coding longer than you have been alive.


To have an SVG interact with user actions, you need to embed the SVG into your document. As a case in mind, I placed the following SVG image into the body of my document:

<svg style="display: none;">

  <defs>

    <symbol id="icon-video" viewBox="0 0 1024 721">

      <title>YouTube Play Button</title>

      <path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19.3,83.8 c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22.1,0.8-44.3,1.1-66.4,1.5 c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8-1.2-61.6-2.4-92.2-5 c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35.4-5.8-70.7-6.7-106.1 C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-36.2,48.9-57,87.9-65 c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0.5,51.3-0.8,76.9-1 c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3.5,133.7,5.9 c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2,5,68.4,6.5,102.7 C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143 c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z"/>

      <path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2,494z" fill="white"/>

    </symbol>

  </defs>

</svg>

I then place the image in the document using the following code:

<svg class="btn-youtube">

  <use xlink:href="#icon-video"></use>

</svg>

Now, what Paula is saying is that you can use split view in DW to locate the part that you want to apply style rules to. In my case I have two paths that I can use as identifyers, namely "button" and "image".  I can attach an

For more info, Google the subject or go to https://css-tricks.com/click-svg-to-focus/

2 replies

pziecina
pziecina
Legend
April 7, 2018

First you do not require the co-ordinates.

What you do is find the svg attribute that contains the text and wrap that in a link element. If you want the 'link' to enlarge on hover, you now do this using css using css transforms to scale the link, add to this the use of css content to add the text 'click here to call', which you could also do by including this text in the svg and making it invisible then visible on hover.

Do the same for the email.

As for the 'sending' of the telephone link, as Nancy says it will only work if the user is using a phone.

However, remember a mobile device user has no hover, unless you use css pointer/touch events.

    T
    timstringAuthor
    Participating Frequently
    April 7, 2018

    Well, if that's the case that I do thsi in a graphics app, are there any besides Illustrator that do this?

    pziecina
    pziecina
    Legend
    April 7, 2018

    As you are asking in the Dw forum, simply open your svg in Dw and add the links, then add the css in your sites css file.

    As for a graphics app doing this for you, I know inkscape allows you to add links in the svg code, but I don't know of any commercial programs that do so.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 6, 2018

    I think you're over complicating this.  Below is a mobile friendly phone link.  Of course, it won't do anything if the users doesn't have a mobile phone app on their device (tablet, desktop).

    <a href="tel:11234567890">1-123-456-7890</a>

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices