Inkscape

How to add a hyperlink from a text in the SVG image

Asked by Vanib

I have an svg image which represents an Oracle Server Model diagram. I want to be able to click on the name of a (e.g. DESC_E) column so that an HTML or PDF file is opened (e.g. the page will describe what kind of informtion is stored in column DESC_E.)
How can I achieve this?

Is it also possible to have "hover/pop-up" text to appear when the mouse is moved over to a column?

A simple working example would be very appreciated.

Below is a piece of code representing the Server model diagram.

THanks

===========================================================================

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" stroke="black" text-rendering="auto" stroke-linecap="square" stroke-miterlimit="10" stroke-opacity="1" shape-rendering="auto" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><defs id="defs1"
    ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1"
      ><path d="M0 0 L968 0 L968 653 L0 653 L0 0 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath2"
      ><path d="M0 0 L0 150 L307 150 L307 0 Z"
      /></clipPath
    ></defs
    ><g fill="white" font-size="10" font-family="sans-serif" stroke="white"
    ><rect x="0" width="968" height="653" y="0" clip-path="url(#clipPath1)" stroke="none"
    /></g
    ><g fill="rgb(255,255,180)" text-rendering="optimizeLegibility" font-size="10" font-family="sans-serif" transform="translate(12,12)" stroke="rgb(255,255,180)"
    ><rect x="0" width="306" height="149" y="0" clip-path="url(#clipPath2)" stroke="none"
      /><rect x="0" y="0" clip-path="url(#clipPath2)" fill="none" width="306" height="149" stroke="blue"
      /><text x="62" y="11" clip-path="url(#clipPath2)" fill="blue" stroke="none" font-weight="bold" xml:space="preserve"
      >MICINT1.IR_OUTSIDE_AGENCY_CTBL</text
      ><line clip-path="url(#clipPath2)" fill="none" x1="0" x2="305" y1="15" y2="15" stroke="blue"
      /><text fill="blue" x="2" xml:space="preserve" y="29" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="29" clip-path="url(#clipPath2)" stroke="none"
      >*</text
      ><text fill="black" x="26" xml:space="preserve" y="29" clip-path="url(#clipPath2)" stroke="none"
      >OUTSIDE_AGENCY_CODE</text
      ><text fill="green" x="176" xml:space="preserve" y="29" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (4 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="43" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="43" clip-path="url(#clipPath2)" stroke="none"
      ></text
      ><text fill="black" x="26" xml:space="preserve" y="43" clip-path="url(#clipPath2)" stroke="none"
      >ABBREV_E</text
      ><text fill="green" x="176" xml:space="preserve" y="43" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (4 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="57" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="57" clip-path="url(#clipPath2)" stroke="none"
      ></text
      ><text fill="black" x="26" xml:space="preserve" y="57" clip-path="url(#clipPath2)" stroke="none"
      >ABBREV_F</text
      ><text fill="green" x="176" xml:space="preserve" y="57" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (4 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="71" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="71" clip-path="url(#clipPath2)" stroke="none"
      >*</text
      ><text fill="black" x="26" xml:space="preserve" y="71" clip-path="url(#clipPath2)" stroke="none"
      >DESC_E</text
      ><text fill="green" x="176" xml:space="preserve" y="71" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (80 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="85" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="85" clip-path="url(#clipPath2)" stroke="none"
      >*</text
      ><text fill="black" x="26" xml:space="preserve" y="85" clip-path="url(#clipPath2)" stroke="none"
      >DESC_F</text
      ><text fill="green" x="176" xml:space="preserve" y="85" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (80 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="99" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="99" clip-path="url(#clipPath2)" stroke="none"
      ></text
      ><text fill="black" x="26" xml:space="preserve" y="99" clip-path="url(#clipPath2)" stroke="none"
      >SHORT_DESC_E</text
      ><text fill="green" x="176" xml:space="preserve" y="99" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (30 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="113" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="113" clip-path="url(#clipPath2)" stroke="none"
      ></text
      ><text fill="black" x="26" xml:space="preserve" y="113" clip-path="url(#clipPath2)" stroke="none"
      >SHORT_DESC_F</text
      ><text fill="green" x="176" xml:space="preserve" y="113" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (30 BYTE)</text
      ><text fill="black" x="2" xml:space="preserve" y="127" clip-path="url(#clipPath2)" stroke="none"
      > </text
      ><text fill="red" x="16" xml:space="preserve" y="127" clip-path="url(#clipPath2)" stroke="none"
      >*</text
      ><text fill="black" x="26" xml:space="preserve" y="127" clip-path="url(#clipPath2)" stroke="none"
      >STATUS_CODE</text
      ><text fill="green" x="176" xml:space="preserve" y="127" clip-path="url(#clipPath2)" stroke="none"
      >VARCHAR2 (1 BYTE)</text
    ></g
  ></g
></svg
>

Question information

Language:
English Edit question
Status:
Answered
For:
Inkscape Edit question
Assignee:
No assignee Edit question
Last query:
Last reply:
Revision history for this message
Ryan Lerch (ryanlerch) said : 		#1

Do you want the interactivity (clicking the link) to work in inkscape itself? or when you open an SVG in the web browser?

Revision history for this message
Vanib (vani-bansoodeb) said : 		#2

More info: I want the links to work on the SVG image rendered in a browser.

Revision history for this message
su_v (suv-lp) said : 		#3

On 2013-05-22 20:51 +0100, Vanib wrote:
> More info: I want the links to work on the SVG image rendered in a
> browser.

Related section in the Inkscape manual:
<http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web.html>
<http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Links.html>

(Note: Inkscape currently does not support exporting such hyperlinks to
PDF - but they work as expected when viewing the SVG file e.g. in a web
browser)

Can you help with this problem?

Provide an answer of your own, or ask Vanib for more information if necessary.

To post a message you must log in.