I'm having trouble trying to place a clickable link within my SVG image. I've read a few articles but I still cannot seem to get the hang of it, I would greatly appreciate if anyone could guide me on what I may be doing wrong & how I can resolve the issue with my code, Thank you. I'll add a snippet below:
<div class="apps">
<svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0
-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-
4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
</div>
Links can be placed inside an svg element by use of the xlink namespace, see https://www.w3.org/wiki/SVG_Links.
For the example in the question you could use something like this,
<div class="apps">
<svg id="app-button" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://localhost">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0
-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-
4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z" />
</a>
</svg>
</div>
By placing a reference to the xlink namespace in the svg element (xmlns:xlink="http://www.w3.org/1999/xlink") we can use an anchor element like <a xlink:href="...">...</a> around whatever part of the svg image we wish to make clickable.
In this case only the paths are clickable, not the entire svg viewbox as would be the case if we wrapped the whole <svg>...</svg> in a standard html anchor element.
there's no need to add link to svg
just enclose them inside anchor tag
<a href="somelink.com">
<svg></svg>
</a>
Say i have this HTML layout:
<div class="cards">
<div class="card">
<img class="card-image">
<h3 class="card-title">...</h3>
<p class="card-text">...</p>
<a class="card-link">
text
<svg class="card-link-svg">
...some svg
</svg>
</a>
</div>
<div class="card">
...
</div>
...
</div>
Which is a card repeated say 20 times on a page for examples sake.
In the response from the server i have the same SVG code repeated 20 times. Then i if multiply this by 4 ~ 5 to represent other card sets i now have the same SVG code ~100 times repeated over and over.
I then have say another ~20-30 varying SVG's of different sizes and shapes that are used in other components on the page, making it hard to get in to a sprite sheet.
On one of my pages on my site this has bloated my initial response up to 220kb just for the document, which to me is quite huge.
Is there a way to reduce the code footprint of using SVG's while maintaining the ability to style them with CSS?
This combined with this seems to have been what i was after.
/static/svg/sprite.svg
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="arrow" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
Allows external reference to a singular SVG so it boils down to:
<svg>
<use xlink:href="/static/svg/sprite.svg#arrow"></use>
</svg>
I wanted to use icons with the ability to change their color and size on the fly with CSS. I decided to go with SVG icons, inspired by the way CSS Tricks uses SVG icons on their site.
Here is how I did it (similar to CSS Tricks):
In my footer template I added something like:
<footer>
<!-- Amazing footer -->
<!-- ... -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
<symbol id="icon-search" viewBox="0 0 470 470">
<title>icon-search</title>
<path d="M447.05,428l-109.6-109.6c29.4-33.8,47.2-77.9,47.2-126.1C384.65,86.2,298.35,0,192.35,0C86.25,0,0.05,86.3,0.05,192.3 s86.3,192.3,192.3,192.3c48.2,0,92.3-17.8,126.1-47.2L428.05,447c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4 C452.25,441.8,452.25,433.2,447.05,428z M26.95,192.3c0-91.2,74.2-165.3,165.3-165.3c91.2,0,165.3,74.2,165.3,165.3 s-74.1,165.4-165.3,165.4C101.15,357.7,26.95,283.5,26.95,192.3z"></path>
</symbol>
</svg>
</footer>
And now I can use the icons anywhere I want like so:
<form>
<input type="text" name="q" placeholder="Search here...">
<button type="submit">
<svg class="icon-svg icon-search" width="22px" height="22px">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</button>
</form>
And it works... however sometimes on page load some random icons simply won't show. So far this issue is on chrome, doesn't seem to be in firefox for example.
Any idea what could cause that? Is there anything wrong with my implementation?
Thanks.
I've had to debug this before, the missing icons would always load after a reload. It lead me to find that, if the page load stalls a bit and the icons are located near the end of the page, the <use xlink:href="..."> element can't find the symbol it's referencing.
Placing the SVG Icons near the top of the page fixes the issue (before any instance of <use>).
Is there a method that we can translate directly code generated by Appium to use it with Protractor?
I find myself always obliged to rewrite code from HTML to search element by class or by CSS because the code generated by Appium recorder used in Protractor tells me that no element found.
Here The details of Appium Inspector for show menu button for example:
Here is the HTML code:
<div flex="" class="flex">
<button class="menu md-button show-sm md-ink-ripple hide" type="button" ng-transclude="" ng-click="toggleSideMenu()" aria-label="Show Menu" hide="" show-sm="">
<ng-md-icon icon="menu" class="ng-scope">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M3 18h18v-2H3v2z"></path>
<path d="M3 13h18v-2H3v2z"></path>
<path d="M3 6v2h18V6H3z"></path>
</svg>
</ng-md-icon>
</button>
</div>
I have a menu with about 10 items. Each item has its own icon. This icon is a SVG file.
For example:
<li class="active">
<a href="/home">
<svg version="1.1" id="svg-menu-home"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="31px" height="31px" viewBox="-8 -8 31 31"
overflow="visible" enable-background="new -8 -8 31 31" xml:space="preserve">
<mask maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15" id="maskTop">
<polygon fill="#FFFFFF" points="12,6.036 2,6.036 2,14.036 6,14.036 6,9.036 8,9.036 8,14.036 12,14.036"/>
<polygon fill="#FFFFFF" points="7,0.036 0,7.036 14,7.036"/>
</mask>
<rect mask="url(#maskTop)" fill="#939598" width="15" height="15"/>
</svg>
<span>Home</span>
</a>
</li>
When a user interacts with the menu item I can assign a class etc to it (hover, select, active).
Having the entire source inline seems to be the only way I can change SVG using CSS, such as:
<style>
li.active svg polygon {
fill: red;
}
</style>
The problem is:
Having any significant number of SVG files inline makes code unreadable, and
Doesn't make it easy to maintain the SVG if you reference it elsewhere.
I would much rather make reference to the file src the way you would an IMG (<img src="x.jpg"/>) and avoid a Javascript dependent solution.
However all the ways I've seen don't allow for CSS styling of the SVG element (or require JS).
Any thoughts/workarounds?
Probably not the most elegant solution, but you could organize them into php includes:
<?php include 'inc/svg-menu-home.svg.php'; ?>
I think is not a bad way to have a look over http://raphaeljs.com/ . It helped me to create this http://screencast.com/t/rNr0Cbqkb ( every area is a svg )