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>
Related
I have a sprite of SVGs and a list of icons/logos in my database.
I loop through all of them and use a templating engine to generate my icons, such as:
<div class="partsvg__container">
<svg class="partsvg__wt-icon partsvg__wt-icon--{{icon}}">
<use xlink:href="svg/icons.svg#wt-icon-{{icon}}"></use>
</svg>
</div>
I might not have a SVG for every item in the database, and in that case the template renders an empty space.
How do I do so that if (for instance) svg/icons.svg#wt-icon-stackoverflow is not present in the spite, to still show a default one (ie: svg/icons.svg#wt-icon-default)?
I found a solution!
You can insert a symbol in your svg for the "not found case". In this way, if the symbol isn't found, a placeholder will be draw in the background.
<div class="partsvg__container">
<svg class="partsvg__wt-icon partsvg__wt-icon--{{icon}}">
<use xlink:href="svg/icons.svg#wt-icon-{{'Placeholder'}}"></use>
<use xlink:href="svg/icons.svg#wt-icon-{{icon}}"></use>
</svg>
</div>
I'm looking for an advice about work with SVG images, respectively icons.
What I've tried
If I'm using PNG icons, the CSS is like:
elem:after {background: url('icon.png'); ...}
I've tried the same way
elem:after {background: url('icon.svg'); ...}
but it isn't what I'm looking for. This solution lose advantages of SVG icons (they're small and blured, fuzzy).
What I have
I've generated this code online using Icomoon app.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-love" viewBox="0 0 33 32">
<title>love</title>
<path d="M32.916 15.597c0.604-0.66 ..."></path>
</symbol>
<symbol id="icon-shop" viewBox="0 0 34 32">
<title>shop</title>
<path d="M17.148 27.977c-..."></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-shop">
<use xlink:href="#icon-shop"></use>
</svg>
My question
Is it semantically correct to put icons into HTML markup, instead of putting them into CSS?
Across whole website there is about 60 icons, any unique, any are repeated more times. Generated markup above has about 50kB.
Can I put all icons into general layout template and load them all in whole website, or include just icons I use in the page?
Here I've found How to change color of SVG image using CSS (jQuery SVG image replacement)? (3 years ago), but don't know if it's the right way.
How to cache SVG properly? Is it posible when I use it like I'm writing above?
I read many articles, but not definitely sure how to do that best way.
Thanks for advice.
I have a webpage with lots of SVG icons that will be in the HTML. Rather than include them as an IMG tag and possibly slow the page with those HTTP requests, I'm placing the SVG code like this:
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg>
Note: where it says "lots of code here", there is a huge string of numbers/letters that make up the path for this SVG.
The issue this creates is it's very ugly when not easily maintainable in the HTML (to the point where my editor bogs own because these SVG strings are so long).
Is there a cleaner, simpler way to include these SVG icons in my HTML while still eliminating the extra HTTP requests?
Thanks for your time.
The most proven way is to collect all the icons SVG in one file - the sprite SVG
Creating a Sprite and connecting it to HTML
The action plan is as follows:
Creating a Sprite
Connecting it to HTML
Calling SVG images from the sprite
Styling icons
Creating a Sprite
The main task of the sprite is to be a repository for icons that before the call to a specific place HTML pages should be invisible.
To do this,the code for each icon is wrapped with <symbol id =" .. "> ... </ symbol> tags with a unique identifier, which will be followed by the <use>
Template Sprite:
<div id="container">
<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 126 126" >
<symbol id="picasa">
<path d="M113.5 57.... 72.8z" />
</symbol>
<symbol id="wordpress" viewBox="0 0 126 126">
<path stroke ="black" d="M113.5 57.7l-8.5-11.4 .. 86.1 62.9z"/>
</symbol>
<symbol id="twitter">
<path d="M113.5 57.6l-8.5-11.4.... 7.4-2.4V85.4z"/>
</symbol>
<symbol id="apple">
<path d="M113.5 57.7l-8.5-11.4... 78.5 78.7 82z"/>
</symbol>
</div>
As you can see, all <path> attributes are removed for later styling of icons from an external CSS file.
Adding a sprite file to HTML
There are several ways to add SVG files to HTML, but the most reliable way is to add it using the <object>
<object type="image/svg+xml" data="Sprite.svg" width="200" height="200">
Your browser does not support SVG
</object>
Adding icons from the sprite
<div id="container">
<svg viewBox="0 0 126 126" >
<use xlink:href="#apple"></use>
</svg>
</div>
The viewBox attributes should be like thesvg icon or change the scaling inside HTML if necessary.
Icons as links
For this, in SVG, unlike HTML, its own form of record
<svg viewBox="0 0 126 126" >
<a xlink:href="https://www.apple.com/ru/"><use xlink:href="#apple"></use></a>
</svg>
Styling icons
When using the <use> command, the icon falls into the shadow DOM and its attributes behave strangely, - there is an icon of the icon, but it can not be controlled from the outside.
In addition, the icon attributes for example: style = "fill: gray; stroke: crimson;" have the highest priority. Therefore, we deleted these attributes. see the example of the sprite above.
To solve the problem of inheritance of parental properties by objects in shadow DOM, you must use forced inheritance
svg path{
fill:inherit;
stroke:inherit;
}
and then to the icons you can already apply CSS rules from the external table
svg path:hover{fill:yellow;}
#picasa{fill:black;}
#apple{fill:purple;}
#twitter{fill:black;}
#wordpress{fill:blue;}
If you go for the first time along this path, then inevitably there will be many questions.
Ask, do not be shy.
All sooner or later it turned out to be done and customized sprite.
The main recommendation is to do everything yourself manually for the first time, to understand how it is arranged, and then you can already openly use special utilities to automatically create sprites.
You should convert all your .svg files to one font file, here is how:
How to convert .svg files to a font?
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>).
I am planning to use inline svg concept to create svg spritesheet for a project.
There are actually many ways to create svg spritesheet. I preferred two methods (because of performance) to create spritesheet. they are as follows:
Group all the svgs to single svg by wrapping each svg's content using symbol tag with unique ID, so that later we can refer this using use tag in HTML.
Generate a css file having all the svgs referred through css background-image property. each svg will have a unique class name.
Now, I am in dilemma of which method to use exactly. FYI, this is not opinion-based question because I am not looking for opinions but considering performance and optimal solution.
PS: I can generate the svg sprite sheets using gulp task runner.
Pre-Information
Performance within a browser is something very difficult to test for and gauge, simply because of the amount of variables which can cause changes, spikes or differences between browsers, hardware or other things which could be bottle-necking the performance.
The below test's I have run on a Dell laptop with the following hardware and browser
Intel Core i5-3320M CPU # 2.60GHz
8GB DDR3 Ram (unsure of timing's etc)
Windows 8.1 Enterprise - 64Bit
Google Chrome v45.0.2454.101 m
I've only ran 3 of the test's I would have liked to due to time constraints but may come back to continue with the tests and also rerun them on different browsers and machines.
The SVG I Used
I created an SVG element which uses 5 icons layered on top of each other.
All of these icons are from iconmonstr.com which provides free to use SVG icons.
CodePen
The Tests
Inline - <use>
The Code
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#globe-4-icon"></use>
</svg>
Full Codepen Example
The Results
1 Request - 221B Transfer
Results
Average
Finish: 10.3ms - DOMContentLoaded: 22.8ms - Load: 22.3ms
Inline - Individual <svg>'s
The Test
This file is too large so only giving CodePen Example
Full Codepen Example
The Results
1 Request - 221B Transfer
Results
Average
Finish: 9.7ms - DOMContentLoaded: 20.6ms - Load: 19.9ms
External File - <use>
The Test
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#globe-4-icon"></use>
</svg>
Use this with the base file given at the top of the page
The Result
2 Requests - 440B Transfer
Results
Average
Finish: 57.5ms - DOMContentLoaded: 41.3ms - Load: 58.4ms
Conclusion
As we can see from the above tests and results, using an inline SVG and referencing it is much quicker than using an external file; cached or not.
Neither of the two inline SVG methods seem to have that many speed differences, but I would personally go for the <use> method, simply because it is easier to use in the long run and helps keep your body code clean.
Now, as I have stated, these results are entirely dependant on an infinite amount of variables, to name a few:
Browser
Hardware
Internet Connection
SVG File Size
Bottle-neck Software (Anti-virus etc)
I would personally use whatever you feel most comfortable with.
I hope these results are somewhat useful or satisfactory and help you with what you require.
View all the tests and results here!
I've had the most success with SVGs in a single sprite file with unique ids. Most of the svg minification and concatenation scripts will simply name each Id after the individual file name, which is easy enough.
Then, for the best chance of proper scaling and such, I included the SVGs via the HTML tag:
<svg viewBox="0 0 50 50"
class="svgIcon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#myIconIdHere"></use>
</svg>
If you're lucky, the viewBox value will be the same, if not, you may need to provide that with a view helper of some sort.
In my past works, I've stored the individual viewBox values in a config for later dynamic generation. Of course you could also just generate each SVG tag in a file somewhere as a string. Here is a sample config we used on one project:
config = {
"arrow": {
"viewBox" :"0 0 50 49.999360957030746",
}
,
"close": {
"viewBox" :"0 100 50 49.999360957030746",
}
...
}
Performance-wise, I can only speak a small amount.
This solution worked in IE9+, Chrome, Firefox, and mobile devices. We have animations across the board that involve these SVGs, and scale them for each breakpoint. The CSS animations applied to elements didn't have any major lagging issues except for IE9. I did look over this analysis for more help.
I'd be happy to show you the high traffic page using these SVGs, but would prefer if you private messaged me.