Member Avatar for squeak24

Hey Everyone.

I am having issues with a responsive SVG and wondering if any of you can help.

Bascially, I have an SVG image. I have tried to add it into an object:

<object type="image/svg+xml" data="svgfile.svg" width="99%"> Your Browser does not support SVG</object>

But the problem with this, I have anchors in the main HTML page that I want to smooth scroll to.

So I have placed it into the HTML page inline:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   id="svg2"
   viewBox="0 0 600.00001 600.00001"
   height="600"
   width="600">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-452.36216)"
     id="layer1">
    <image
       width="581.09998"
       height="581.09998"
       preserveAspectRatio="none"
       style="image-rendering:optimizeQuality"
       xlink:href="data:image/

       <!--IMAGE DATA-->

       style="image-rendering:optimizeQuality"
         preserveAspectRatio="none"
         height="115.2"
         width="244.2" />
    </a>
  </g>
</svg>

But the issue I have is the inline SVG doesn't seem to be responsive.

So the three questions I have

  1. Is there a way in which I can make the anchored links in the object relative, so when I click on it, it scrolls smoothly?
  2. Is there a way in which I can make the inline SVG responsive?
  3. Can I call the XML file which contains the SVG data to display the image and data in a responsive way?

I must point out, the SVG contains data that links to other pages and the achors on the current page. When it is in the object it is not relative to the main page. When it is inline, the anchor links work, but I can't get it to be responsive.

Any help is appreciated.

  • 1 Contributor
  • 1 Reply
  • 303 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by squeak24
Member Avatar for squeak24

I managed to sort it with an image map as described on here.

Edited by squeak24
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.