Put a link in an svg file

[timstring]

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!!

[Nancy OShea]

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>

[pziecina]

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.

[timstring]

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

[pziecina]

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.

[timstring]

So, none of this is helpful.  I need to know how, not what.  pziecina how do I do this or what tag do I use to trigger this in DreamWeaver?  I am not finding anything that does this, hence the question.  Somehow or other I triggered a popup with the terms, but I have absolutely how I did it.

[pziecina]

You use split view in Dw, select the text in live view and the relevant svg code will be highlighted. You then ensure all the relevant svg is highlighted and wrap that code in an 'a' element, giving it an id.

If you do not know how to work with code, especially svg and css in this case, then you cannot do what you wish. Knowing how to work with code is essential for using Dreamweaver, or any other program that you can do this with.

Dreamweaver is not a visual tool anymore, and never has been as far as svg is concerned. You may be able to do what you wish visually using Adobes CC Animate, but I doubt it.

[timstring]

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.

[BenPleysier · Accepted solution]

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/

[pziecina]

timstring  wrote

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

Interesting thought, and congratulations on being well on the way to your 200th birthday.

svg is code, and the only way to do what you wish is to find the relevant code within the svg file. Even using co-ordinates these would have to be placed within the svg code itself.

The only other way is to use the svg as a background image, then place a transparent image over the svg, create an 'hotspot', (similar to creating an image map with hotspots) using Dw's image map tool.

However doing it that way would meen that it was not responsive, as the hotspot uses fixed co-ordinates that do not resize. There are a number of javascript based utilities that will create responsive 'hotspots' but as I do not use them, someone else may be able to supply the link to one.

[Nancy OShea]

This tutorial for creating an interactive infographic (SVG) might help.  It's  more complex than your project but the process is the same.   Downloadi and study the project files.

DEMO:  Interactive SVG using CSS and JavaScript

DOWNLOAD:  http://tympanus.net/Tutorials/InteractiveSVG/InteractiveSVG.zip

TUTORIAL: Interactive Infographic with SVG and CSS Animations

[timstring]

So, I downloaded Illustrator and it generated the SVG code for the file.  I added the <a href="..."> tags.  They work fine on a computer, even when resizing the window.  If I click on the phone # on my Mac, the browser will ask to launch Facetime.  If I click on the email, it calls up a new email message, and the links for the "about" and "gallery" also work.  However, none of them work on my iPhone.  According to Google Analytics, 98% of the hits on my website come from smartphones and tablets, so it has to work.  What gives?

http://s-w-carpenters.com

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 1280 1024" style="enable-background:new 0 0 1280 1024;" xml:space="preserve">

<image style="overflow:visible;" width="1258" height="768" xlink:href="shiplap.png"  transform="matrix(1.0175 0 0 1.3333 0 0)">

</image>

<image style="overflow:visible;" width="900" height="141" xlink:href="title.png"  transform="matrix(1.2222 0 0 1.2222 90 67)">

</image>

<image style="overflow:visible;" width="475" height="100" xlink:href="tyler.png"  transform="matrix(1.1368 0 0 1.1368 370 229.7852)">

</image>

<image style="overflow:visible;" width="1024" height="1024" xlink:href="tools_sm.png"  transform="matrix(0.3857 0 0 0.3721 26 490)">

</image>

<a href="tel:9038302844">

<image style="overflow:visible;" width="316" height="91" xlink:href="phone.png"  transform="matrix(1.7342 0 0 1.7379 473 549)">

</image>

</a>

<a href="mailto:info@s-w-carpenters.com">

<image style="overflow:visible;" width="1455" height="114" xlink:href="email.png"  transform="matrix(0.6048 0 0 0.5983 307 776.9061)">

</image>

</a>

<a href="about.html">

<image style="overflow:visible;" width="241" height="83" xlink:href="about.png"  transform="matrix(0.9759 0 0 0.9759 90 900)">

</image>

</a>

<a href="gallery.heml">

<image style="overflow:visible;" width="430" height="103" xlink:href="gallery.png"  transform="matrix(0.9023 0 0 0.9023 799 894)">

</image>

</a>

<image style="overflow:visible;" width="1008" height="131" xlink:href="slogan.png"  transform="matrix(0.9539 0 0 0.9539 159.2366 363)">

</image>

</svg>

[Nancy OShea]

Safari on iOS does not support href for links in SVG files.  Use xlink:href instead.

[timstring]

I am having the issue with Chrome and Safari.   Using "xlink:href" doesn't work with either as well.

According to Mozilla, xlink:href has been deprecated as of SVG 2.0 and should not be used.  https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:hrefhttp://     

[BenPleysier]

It is a surprise to me that xlink:href has been deprecated, I did not know until I read the article. Things are moving too fast for this old codger.

One way forward is to use an on-click event. I couldn't find anything as a suitable example except for Click SVG Element to Focus (and Style) | CSS-Tricks. Maybe you will have more luck Googling the subject.