Part 2 – An SVG Walk through: Adding links to inkscape SVG files.


Created a very simple button in inkscape placing it on the top left corner.

54×34 rectangle (Fibonacci numbers – Golden ratio). Filled with a gradient – colors: (golden, red, golden). Added text (white) on top and grouped the text and button together. Under (file > document) I hit “fit to selection” to define the graphic document size to the button size.

A link inside the SVG is removed from the view of search engine spiders; this is done for page theme and to not offset pagerank to say contact us pages – added the link <a
xlink:href=”https://wsmithdesign.wordpress.com/&#8221; target=”_top”> … </a> around the grouped button and text:


<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
<!– Created with Inkscape (http://www.inkscape.org/) –>

<svg
xmlns:dc=”http://purl.org/dc/elements/1.1/&#8221;
xmlns:cc=”http://creativecommons.org/ns#&#8221;
xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#&#8221;
xmlns:svg=”http://www.w3.org/2000/svg&#8221;
xmlns=”http://www.w3.org/2000/svg&#8221;
xmlns:xlink=”http://www.w3.org/1999/xlink&#8221;
xmlns:sodipodi=”http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd&#8221;
xmlns:inkscape=”http://www.inkscape.org/namespaces/inkscape&#8221;
width=”54″
height=”34″
id=”svg2″
version=”1.1″
inkscape:version=”0.47 r22583″
sodipodi:docname=”buy.svg”>
<defs
id=”defs4″>
<linearGradient
id=”linearGradient3590″>
<stop
style=”stop-color:#f6b83b;stop-opacity:1;”
offset=”0″
id=”stop3592″ />
<stop
id=”stop3636″
offset=”0.5″
style=”stop-color:#ff6020;stop-opacity:1;” />
<stop
style=”stop-color:#ffc040;stop-opacity:1;”
offset=”1″
id=”stop3594″ />
</linearGradient>
<inkscape:perspective
sodipodi:type=”inkscape:persp3d”
inkscape:vp_x=”0 : 526.18109 : 1″
inkscape:vp_y=”0 : 1000 : 0″
inkscape:vp_z=”744.09448 : 526.18109 : 1″
inkscape:persp3d-origin=”372.04724 : 350.78739 : 1″
id=”perspective10″ />
<linearGradient
inkscape:collect=”always”
xlink:href=”#linearGradient3590″
id=”linearGradient3596″
x1=”30.162008″
y1=”1052.1447″
x2=”29.988783″
y2=”1018.5798″
gradientUnits=”userSpaceOnUse”
gradientTransform=”translate(0,0.08730158)” />
<inkscape:perspective
id=”perspective3606″
inkscape:persp3d-origin=”0.5 : 0.33333333 : 1″
inkscape:vp_z=”1 : 0.5 : 1″
inkscape:vp_y=”0 : 1000 : 0″
inkscape:vp_x=”0 : 0.5 : 1″
sodipodi:type=”inkscape:persp3d” />
<linearGradient
inkscape:collect=”always”
xlink:href=”#linearGradient3590-7″
id=”linearGradient3596-1″
x1=”30.162008″
y1=”1052.1447″
x2=”29.988783″
y2=”1018.5798″
gradientUnits=”userSpaceOnUse” />
<linearGradient
inkscape:collect=”always”
id=”linearGradient3590-7″>
<stop
style=”stop-color:#ff0000;stop-opacity:1;”
offset=”0″
id=”stop3592-4″ />
<stop
style=”stop-color:#ff0000;stop-opacity:0;”
offset=”1″
id=”stop3594-0″ />
</linearGradient>
<linearGradient
gradientTransform=”translate(4.7348153,-5.3049182)”
y2=”1018.5798″
x2=”29.988783″
y1=”1052.1447″
x1=”30.162008″
gradientUnits=”userSpaceOnUse”
id=”linearGradient3615″
xlink:href=”#linearGradient3590-7″
inkscape:collect=”always” />
</defs>
<sodipodi:namedview
id=”base”
pagecolor=”#ffffff”
bordercolor=”#666666″
borderopacity=”1.0″
inkscape:pageopacity=”0.0″
inkscape:pageshadow=”2″
inkscape:zoom=”6.8676471″
inkscape:cx=”32.678801″
inkscape:cy=”6.9529342″
inkscape:document-units=”px”
inkscape:current-layer=”layer1″
showgrid=”false”
inkscape:window-width=”1024″
inkscape:window-height=”712″
inkscape:window-x=”-4″
inkscape:window-y=”-4″
inkscape:window-maximized=”1″ />
<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&#8221; />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label=”Layer 1″
inkscape:groupmode=”layer”
id=”layer1″
transform=”translate(-1.2991207,-1.3269143)”>
<a
xlink:href=”https://wsmithdesign.wordpress.com/&#8221;
target=”_top”>
<g
id=”g3642″
transform=”translate(1.0815562,-1017.3402)”>
<rect
ry=”16.782436″
y=”1018.6671″
x=”0.21756454″
height=”34″
width=”54″
id=”rect2816″
style=”fill:url(#linearGradient3596);fill-opacity:1;stroke:#7f99ef;stroke-width:0;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none” />
<text
transform=”scale(0.95903528,1.0427145)”
sodipodi:linespacing=”125%”
id=”text3638″
y=”999.39063″
x=”8.8051386″
style=”font-size:20.66633987px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#faf3f3;fill-opacity:1;stroke:none;font-family:Verdana;-inkscape-font-specification:Verdana”
xml:space=”preserve”><tspan
y=”999.39063″
x=”8.8051386″
id=”tspan3640″
sodipodi:role=”line”>Buy</tspan></text>
</g>
</a>
</g>
</svg>

Inkscape supports links it just does not create them – At least in the version I have. Once you begin to become familiar with the SVG file structure – hacking the file or adding a link is not difficult.
.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: