Tuesday, December 29, 2015

How to Create an Internal Anchor (Link) within a SVG

((from the old Web System blog. Disregard any links as they are probably outdated.))

 Did you know that Google & Bing index SVGs for their search results?  Because a SVG can be 100% text, it is typically lighter than a pdf or quite likely, a web page. 

Linking a SVG to an external URL is easy, as I've demonstrated within an earlier post, but it's just as easy to create internal links within a SVG. This could be useful when you'd want to consolidate a large amount of information within one svg and would like to make navigation simpler. Let's say that someone is selling a variety of stuff on EBay or Etsy and instead of only listing all of their items separately, they'd also like to make a consolidated page of all their items and descriptions - then make additional links to Etsy or EBay for the specific listing.

Will it help in SEO?  I'm not sure, but I suspect that if the content is not identical, it won't hurt.  We have an experiment running right now (for a shop at Etsy) and should be able to report any success within 6 weeks.

Anyway, here's how to create an internal, SVG link.

I started by creating a long and narrow SVG (document properties), just to make it easier to view here at Blogger.  The link will be at the top (Link to rectangle) and the Anchor (a Red Rectangle).will be at the bottom of a 2,000 pixel svg.

 After I drew the red rectangle, I selected it and in Element Properties (right toolbar) I changed its ID to 'rectangle'.

Then I went back up to my text, selected it and then clicked the Link tool (top tools).  It popped up a URL box and I entered: '#rectangle', then clicked ok.

That's it.  I went into my source, copied it, pasted it into a text editor and saved.  Soon, you will be able to export the source to your desktop.

Link to the svg is here: 

No comments:

Post a Comment