SVG Tutorial
SVG Demo
SVG Useful Resources
Selected Reading
- SVG - Linking
- SVG - Interactivity
- SVG - Gradients
- SVG - Patterns
- SVG - Filters
- SVG - Stroke
- SVG - Text
- SVG - Shapes
- SVG - Overview
- SVG - Home
SVG Demo
- SVG - Real Time SVG AD
- SVG - Demo Game
- SVG - Lazylinepainter.js Effects
- SVG - Full Screen Overlay Effects
- SVG - Transformation Effects
- SVG - Vague.js Effects
- SVG - zPath.js Effects
- SVG - Walkway.js Effects
- SVG - Velocity.js Effects
- SVG - Raphael.js Effects
- SVG - Tab Effects
- SVG - Side Show Effects
- SVG - Scroll Effects
- SVG - Playful Effects
- SVG - Gradients Effects
- SVG - Gooey Effects
- SVG - Brand Effects
- SVG - Arrow Effects
- SVG - Text With CSS Effects
- SVG - Text Effects
- SVG - Image Filter
- SVG - Flat Surface Shade
- SVG - Graph
- SVG - amChart
- SVG - Maps
- SVG - Key point
- SVG - Drag
- SVG - Clock
- SVG - Icons
- SVG - Dialog
- SVG - Loaders
SVG Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
SVG - Linking
SVG - Linking
<a> element is used to create hyperpnk. "xpnk:href" attribute is used to pass the IRI (Internationapzed Resource Identifiers) which is complementary to URI (Uniform Resource Identifiers).
Declaration
Following is the syntax declaration of <a> element. We ve shown main attributes only.
<a xpnk:show = "new" | "replace" xpnk:actuate = "onRequest" xpnk:href = "<IRI>" target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" > </a>
Attributes
| Sr.No. | Name & Description |
|---|---|
| 1 | xpnk:show − for documentation purpose for XLink aware processors. Default is new. |
| 2 | xpnk:actuate − for documentation purpose for XLink aware processors. |
| 3 | xpnk:href − location of the referenced object. |
| 4 | target − used when targets for the ending resource are possible. |
Example
testSVG.htm
<html>
<title>SVG Linking</title>
<body>
<h1>Sample Link</h1>
<svg width="800" height="800">
<g>
<a xpnk:href="http://www.tutorialspoint.com">
<text x="0" y="15" fill="black" >
Cpck me to load TutorialsPoint DOT COM.</text>
</a>
</g>
<g>
<text x="0" y="65" fill="black" >
Cpck in the rectangle to load TutorialsPoint DOT COM</text>
<a xpnk:href="http://www.tutorialspoint.com">
<rect x="100" y="80" width="300" height="100"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" />
</a>
</g>
</svg>
</body>
</html>
Output
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering. Cpck on pnk and rectangle to see the result.