Loading ...
Sorry, an error occurred while loading the content.

Using SVG icon for linking!

Expand Messages
  • Salman
    Hi! I have created an SVG button and embedd it inside the xhtml. I want to link this with url in so that when user click on this button he is redirected to
    Message 1 of 5 , Apr 4, 2006
    • 0 Attachment
      Hi!

      I have created an SVG button and embedd it inside the xhtml. I want to
      link this with url in <a> so that when user click on this button he is
      redirected to the web page <a> is referring to. Button is displayed
      but it thumnail does not appear to activate the link. please help!

      ======
      XHTML
      ======
      <html>
      <body>
      <a href="http://www.google.com">
      <object width="50" height="25" type="image/svg+xml"
      data="home.svg"></object>
      </a>
      </body>
      </html>


      ========
      home.svg
      ========

      <?xml version="1.0"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg width="100%" height="100%" viewBox="0 0 200 100"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

      <defs>
      <linearGradient id="three_stops">
      <stop offset="0%" style="stop-color: #ffcc00;"/>
      <stop offset="33.3%" style="stop-color: #cc6699"/>
      <stop offset="100%" style="stop-color: #66cc99;"/>
      </linearGradient>
      </defs>

      <rect x="0" y="0" width="200" height="100" style="fill:
      url(#three_stops); stroke: black;"></rect>
      <text x="100" y="62.5"
      style="text-anchor:middle;font-size:50px;fill:#FFFFFF">Home</text>

      </svg>

      Regards,
      Salmi
    • Sherm
      Salman, To get your hyperlink to work, try wrapping the a xlink: tag around your object:
      Message 2 of 5 , Apr 4, 2006
      • 0 Attachment
        Salman,

        To get your hyperlink to work, try wrapping the "a xlink:" tag
        around your object:

        <svg width="100%" height="100%" viewBox="0 0 200 100"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">

        <defs>
        <linearGradient id="three_stops">
        <stop offset="0%" style="stop-color: #ffcc00;"/>
        <stop offset="33.3%" style="stop-color: #cc6699"/>
        <stop offset="100%" style="stop-color: #66cc99;"/>
        </linearGradient>
        </defs>

        <a xlink:href="http://www.google.com">

        <rect x="0" y="0" width="200" height="100" style="fill:
        url(#three_stops); stroke: black;"></rect>
        <text x="100" y="62.5" style="text-anchor:middle;font-
        size:50px;fill:#FFFFFF">Home</text>

        </a>

        </svg>



        --- In svg-developers@yahoogroups.com, "Salman" <salmi.g@...> wrote:
        >
        > Hi!
        >
        > I have created an SVG button and embedd it inside the xhtml. I
        want to
        > link this with url in <a> so that when user click on this button
        he is
        > redirected to the web page <a> is referring to. Button is displayed
        > but it thumnail does not appear to activate the link. please help!
        >
      • Salman
        Thanks for your reply Stevens, ofcourse it works by wrapping svg element with a xlink: tag. But I was trying to embedd SVG icon in XHTML using and
        Message 3 of 5 , Apr 4, 2006
        • 0 Attachment
          Thanks for your reply Stevens, ofcourse it works by wrapping svg
          element with "a xlink:" tag. But I was trying to embedd SVG icon in
          XHTML using <object> and then enclosing it with <a> element in XHTML
          not in SVG.

          <a link="http://something.com">
          <object data="home.svg", type="image/xml+svg", width="40%">
          </a>

          I dont want to use <a xlink:href> inside svg.

          Regards,
          Salman

          --- In svg-developers@yahoogroups.com, "Sherm" <sstevens@...> wrote:
          >
          > Salman,
          >
          > To get your hyperlink to work, try wrapping the "a xlink:" tag
          > around your object:
          >
          > <svg width="100%" height="100%" viewBox="0 0 200 100"
          > xmlns="http://www.w3.org/2000/svg"
          > xmlns:xlink="http://www.w3.org/1999/xlink">
          >
          > <defs>
          > <linearGradient id="three_stops">
          > <stop offset="0%" style="stop-color: #ffcc00;"/>
          > <stop offset="33.3%" style="stop-color: #cc6699"/>
          > <stop offset="100%" style="stop-color: #66cc99;"/>
          > </linearGradient>
          > </defs>
          >
          > <a xlink:href="http://www.google.com">
          >
          > <rect x="0" y="0" width="200" height="100" style="fill:
          > url(#three_stops); stroke: black;"></rect>
          > <text x="100" y="62.5" style="text-anchor:middle;font-
          > size:50px;fill:#FFFFFF">Home</text>
          >
          > </a>
          >
          > </svg>
          >
          >
          >
          > --- In svg-developers@yahoogroups.com, "Salman" <salmi.g@> wrote:
          > >
          > > Hi!
          > >
          > > I have created an SVG button and embedd it inside the xhtml. I
          > want to
          > > link this with url in <a> so that when user click on this button
          > he is
          > > redirected to the web page <a> is referring to. Button is displayed
          > > but it thumnail does not appear to activate the link. please help!
          > >
          >
        • Martin Honnen
          ... This is an interesting question, I have made some small test case here Neither IE 6 with Adobe
          Message 4 of 5 , Apr 6, 2006
          • 0 Attachment
            --- In svg-developers@yahoogroups.com, "Salman" <salmi.g@...> wrote:

            > I have created an SVG button and embedd it inside the xhtml. I want to
            > link this with url in <a> so that when user click on this button he is
            > redirected to the web page <a> is referring to. Button is displayed
            > but it thumnail does not appear to activate the link.


            This is an interesting question, I have made some small test case here
            <http://home.arcor.de/martin.honnen/svg/test2006040501.html>

            Neither IE 6 with Adobe SVG viewer 3 nor Firefox 1.5 nor Opera 9
            preview follow the link when you click into the first SVG image.

            I think the main problem, at least for Firefox and Opera where the SVG
            implementation is native, is that the SVG document is itself receiving
            events and it is not clear how the HTML specification (which allows
            object inside of an HTML <a> element) and the SVG specification should
            interact here, what you want for your case is that a click in the SVG
            document is transferred to the link element in the HTML document
            embedding the SVG document.

            With IE where the SVG is handled by a plugin I would not expect that
            link to work if plugin rendered content is clicked.

            I don't have a solution to your problem, unless you would use Opera 9
            preview, there I have managed to use JavaScript to solve that as the
            second SVG image link shows where script in the SVG document captures
            any click and then searches the right HTML link element and calls its
            click method.
          • Ahmed Salman
            Thank you for the response Martin! Yes it seems HTML is not able to capture the click event in case of embedded svg. I was trying to make a 4-way grid layout
            Message 5 of 5 , Apr 6, 2006
            • 0 Attachment
              Thank you for the response Martin! Yes it seems HTML is not able to capture
              the click event in case of embedded svg. I was trying to make a 4-way grid
              layout in XHTML containing SVG images as icons to display on mobile. On my
              SE K750i, wrapper XHTML do not transfer XHTML events to the emebedded SVG (
              e.g. to produce animation effect).

              For reference you can have a look at
              http://lab.vodafone.com/public/XHTMLMP-SVGT-Recommendations.html
              for making XHTML+SVGT content.

              Anyway thanks for creating a test case..:)

              Regards,
              Salman


              On 4/6/06, Martin Honnen <honnen_martin@...> wrote:
              >
              > --- In svg-developers@yahoogroups.com, "Salman" <salmi.g@...> wrote:
              >
              > > I have created an SVG button and embedd it inside the xhtml. I want to
              > > link this with url in <a> so that when user click on this button he is
              > > redirected to the web page <a> is referring to. Button is displayed
              > > but it thumnail does not appear to activate the link.
              >
              >
              > This is an interesting question, I have made some small test case here
              > <http://home.arcor.de/martin.honnen/svg/test2006040501.html>
              >
              > Neither IE 6 with Adobe SVG viewer 3 nor Firefox 1.5 nor Opera 9
              > preview follow the link when you click into the first SVG image.
              >
              > I think the main problem, at least for Firefox and Opera where the SVG
              > implementation is native, is that the SVG document is itself receiving
              > events and it is not clear how the HTML specification (which allows
              > object inside of an HTML <a> element) and the SVG specification should
              > interact here, what you want for your case is that a click in the SVG
              > document is transferred to the link element in the HTML document
              > embedding the SVG document.
              >
              > With IE where the SVG is handled by a plugin I would not expect that
              > link to work if plugin rendered content is clicked.
              >
              > I don't have a solution to your problem, unless you would use Opera 9
              > preview, there I have managed to use JavaScript to solve that as the
              > second SVG image link shows where script in the SVG document captures
              > any click and then searches the right HTML link element and calls its
              > click method.
              >
              >
              >
              >
              >
              >
              >
              > -----
              > To unsubscribe send a message to:
              > svg-developers-unsubscribe@yahoogroups.com
              > -or-
              > visit http://groups.yahoo.com/group/svg-developers and click "edit my
              > membership"
              > ----
              >
              >
              >
              > SPONSORED LINKS
              > Xml format<http://groups.yahoo.com/gads?t=ms&k=Xml+format&w1=Xml+format&w2=Svg&w3=Data&c=3&s=35&.sig=u8RdjEjLCbPTzkUjsFG_JA>
              > Svg<http://groups.yahoo.com/gads?t=ms&k=Svg&w1=Xml+format&w2=Svg&w3=Data&c=3&s=35&.sig=BrpyGiBcZ6vcQXDJ7ktaiw>
              > Data<http://groups.yahoo.com/gads?t=ms&k=Data&w1=Xml+format&w2=Svg&w3=Data&c=3&s=35&.sig=CrK_fWaLZ-AZKa5FK8rTGA>
              > ------------------------------
              > YAHOO! GROUPS LINKS
              >
              >
              > - Visit your group "svg-developers<http://groups.yahoo.com/group/svg-developers>"
              > on the web.
              >
              > - To unsubscribe from this group, send an email to:
              > svg-developers-unsubscribe@yahoogroups.com<svg-developers-unsubscribe@yahoogroups.com?subject=Unsubscribe>
              >
              > - Your use of Yahoo! Groups is subject to the Yahoo! Terms of
              > Service <http://docs.yahoo.com/info/terms/>.
              >
              >
              > ------------------------------
              >


              [Non-text portions of this message have been removed]
            Your message has been successfully submitted and would be delivered to recipients shortly.