It's not bad if I load an HTML page
img, svg {
background-color: #eee;
margin: 20px;
}
<div>
<img src="circle.svg"/>
<img src="square.svg"/>
</div>
with just a pair of SVG images
circle.svg
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 300" width="400" height="300">
<circle cx="200" cy="150" r="100"
stroke="red" fill="blue" stroke-width="10" />
</svg>
square.svg
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 300" width="400" height="300">
<rect x="100" y="50" width="200" height="200"
stroke="green" fill="gray" stroke-width="10" />
</svg>
but with over a hundred SVG images, the server gets excessively hit by requests.
One solution is to serve the static files from a dedicated server, but this only dodges the problem. The number of requests remains high.
How can I bundle many SVG images inside just one?
You could use a SVG sprite generator to create one big file with all images aligned in it.
SVG sprite generator will also generate a CSS file in which each individual SVG will be represented with a specific class.
In you HTML you just have to call each image by its class name.
A basic sprite.css could be :
.svg {
background-image: url(sprite.svg) no-repeat;
}
.circle {
background-position: top left;
height:300px;
width: 400px;
}
.square{
background-position: top right;
height:200px;
width: 200px;
}
And then in your html file you could just call:
<div>
<div class="circle"></div>
<div class="square"></div>
</div>
It sounds like you need an SVG sprite. I use this trick all the time. It's great. Just make your svg blocks symbol elements and nest them inside an svg like this:
<svg id="svg-sprite" xmlns="http://www.w3.org/2000/svg">
<symbol id="svg-circle" viewBox="0 0 400 300" width="400" height="300">
<circle cx="200" cy="150" r="100" stroke="red" fill="blue" stroke-width="10" />
</symbol>
<symbol id="svg-square" viewBox="0 0 400 300" width="400" height="300">
<rect x="100" y="50" width="200" height="200" stroke="green" fill="gray" stroke-width="10" />
</symbol>
</svg>
Note that you don't want the xlmns attribute on the individual symbol elements, just the root svg. And the root svg doesn't need a viewBox attribute, since that is encoded in the child symbol elements.
Then you call the symbols elsewhere in the HTML like this via the <use> tag:
<svg>
<use xlink:href="#svg-circle"></use>
</svg>
Lastly, you need to hide the sprite in CSS:
#svg-sprite {
display: none;
}
Here's a Fiddle to demonstrate. Good luck!
The following is a combination of gael's and maqam7's answers, with a bug fix and some details.
First, we combine the two SVGs into one. (We write our own script, use an editor's macros, use one of the web sites that do it, or do it by hand.)
sprite.svg
<svg id="mysprite" xmlns="http://www.w3.org/2000/svg">
<symbol id="circle"
viewBox="0 0 400 300"
width="400" height="300">
<circle cx="200" cy="150" r="100"
stroke="red" fill="blue" stroke-width="10" />
</symbol>
<symbol id="square"
viewBox="0 0 400 300"
width="400" height="300">
<rect x="100" y="50" width="200" height="200"
stroke="green" fill="gray" stroke-width="10" />
</symbol>
</svg>
When we want a circle or a square, we use the xlink:href attribute (deprecated but continue to use it), which will invoke a sub-sprite.
<div class="container">
<svg>
<use xlink:href="sprite.svg#circle"></use>
</svg>
<svg>
<use xlink:href="sprite.svg#square"></use>
</svg>
</div>
There is no need to include the sprite in the body
<img src="sprite.svg"/>
as the sprite is referenced within each svg element.
Hence there is no need to hide the global sprite.
#svg-sprite {
display: none;
}
Only the sub-parts appear.
One caveat: Chrome loads an img and svg directly, but will refuse to load use/xlink:href unless you run a local server.
Remaining issue(s)
I'm not sure this is optimal. It may be that two requests continue to be sent. It's just that the cache will catch the second as identical. No harm is done. Still, loading once via a hidden svg may be a better approach, if someone can fill in the details.
I currently have two SVGs that were designed to interlock with eachother but the higher SVG (The first in the imgur link) acts as if it were a rectangle and "pushes" the lower SVG (The second picture in the imgur link) down away from it and they end up with a large space between them (The third imgur link). I have only changed the width of the second SVG in the code so far. Without manually aligning them, which would ruin my page's responsiveness, is there a way to give the SVG a smaller hitbox or similar?
https://imgur.com/a/YtBuso4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1250">
<defs>
<style>
.cls-1 {
fill: #190eae;
}
</style>
</defs>
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<defs>
<style>
.cls-1 {
opacity: 0.7;
}
</style>
</defs>
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-1" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Thank you
I think the most simple solution to your problem is to lessen the viewBox height of the first <svg>, but to show the overflow. That way, the triangular form at the bottom will "slip" under the second <svg>
svg {
overflow:visible;
display:block;
}
.cls-1 {
fill: #190eae;
}
.cls-2 {
opacity: 0.7;
}
<svg id="svg-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg id="svg-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-2" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Note how I have moved the styles outside the SVGs. They are part of the same DOM anyway, and if both quote the same class name, both styles will be applied to both paths. I've changed the class name for one of them, so that does not happen.
Another issue is that <svg> elements in HTML are inline-blocks. As such they have a line height, and if they are displayed one below the other (as happens here because their default width is 100%), that may lead to a small visible gap between their layout boxes. Setting display:block solves that.
I tried to create an svg and adding path to it.
Here is my jsfiddle
Now, as you can see, I managed to create a down facing triangle but what I am not able to do is filling up the rest of the space(white colored) inside the svg with some other color(say black). How do I do that?
Here is my HTML
<svg id="bigTriangleColors" width="100%" height="100"
viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>
and CSS
#bigTriangleColors {
fill: #E1EAEF;
position: relative;
}
svg:not(:root) {
overflow: hidden;
}
Thank you for your help!
I don't know If I understood correctly, but have you just tried to set the background color on svg
svg {
bacground-color: black;
}
like in this fiddle http://jsfiddle.net/Luoq4Lcz/ ?
Does that solve your problem?
Using background-color on <svg> element works (I believe) in all the latest browser versions, but it didn't work on older versions of every browser.
If backwards compatibility is important to you, then a better solution would be to either:
surround the SVG with a <div> and give that a background colour, or
add a rectangle of the desired colour to the SVG itself:
<svg id="bigTriangleColors" width="100%" height="100"
viewBox="0 0 100 102" preserveAspectRatio="none">
<rect width="100%" height="100%" fill="black"/>
<path d="M0 0 L50 100 L100 0 Z" fill="red"></path>
</svg>
How can I resize my SVG Logo for responsiveness on Mobile?
Here's my Fiddle and my code is below:
body {
background:black;
}
#media screen and (max-width: 500px) {
svg {
width:50%;
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
<g id="Header" sketch:type="MSTextLayer">
<g id="Primary-Nav-[home]-Copy">
<g id="Logo" transform="translate(23.000000, 18.000000)">
<text id="TOMORROW’S">
<tspan x="0.0328778028" y="27">TOMORROW’S</tspan>
<tspan x="36.2975262" y="58">SCORE</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>
For scaling via the img element to work, the SVG image needs to have its width, height and viewBox attributes set inside it. Here is how that looks:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="70px" height="70px" viewBox="0 0 70 70">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
When setting the width, height and viewBox property, you tell the browser what part of the virtual canvas to draw. The view box tells the upper left and lower right corner of the virtual canvas. Thus, if the image is scaled to a size bigger than that, the whole image is scaled up, instead of just making the virtual canvas bigger (resulting in white space next to the SVG shapes in the image).
For more clarification search for viewBox property related to SVG.
Always Set Image Width Via CSS Properties
Do not use the width and height attributes of the img element. It will not give the desired effect. The browsers treat these attributes differently than the corresponding CSS properties.
Use your SVG inside of an <img> tag, for example:
<img src="my_SVG_file.svg" alt="" />
Then you can use standard CSS to affect the <img> tag & make it mobile responsive.
img {
max-width: 100%;
}
CODEPEN DEMO
I'm trying to animate some vector graphics. Therefore I need to use svg inline or use something like https://github.com/jonathantneal/svg4everybody for external embedding in IE. So my HTML looks like this currently:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="chart" viewBox="0 0 1042 1024"><!-- SVG CODE --></symbol>
</svg>
<svg role="img" class="icon" width="200" height="200">
<use xlink:href="#chart"></use>
</svg>
http://codepen.io/anon/pen/LEWjvX
But as you might see the SVG is pretty small, although I used width both in the HTML and CSS (not sure if I need both?). It just doesn't scale. According to many articles I read about this problem (like this one http://css-tricks.com/svg-symbol-good-choice-icons/ or http://css-tricks.com/scale-svg/) it should work that way. What am I doing wrong?
FYI: I used icomoon to create the SVG sprite and Illustrator to create the SVGs. To animate the SVG I gave most of the paths a class name, if that makes any difference.
I'm not sure I understand clearly what's the problem you're asking for help so I'll try to answer a maximum I saw in your snippet.
If you can't see the chart, I think it's more because of the default fill color being black, than because of the size. If you add fill: #FFF into your #wrapper's css or in an appropriate svg{} statement, you'll see it clearly.
If your compass is so small, I think it's because your drawn pathes only are 50px large in a 1024x1024 document. (You're setting a viewBox="0 0 1024 1024" to your <symbol> element but setting it to something like 0 0 50 50 will help if you want to use transformations later, or even better, redraw it in a document where they fit right).
You say that you want to animate those graphics. There are actually a lot of ways to do so. You can look to CSS animations (via a style sheet) or SMIL (directly in the inline svg) or via javascript (by modifying directly the attributes as noticed in Nicholas Kyriakides answer). Look at the examples in the snippet below.
var scale = 1;
window.onload = function(){
document.getElementById('p').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale+=.1)+')');}, false);
document.getElementById('m').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale-=.1)+')');}, false);
};
.icon {
width: 400px;
height: 200px;
}
.wrapper {
background: black;
width: 80%;
max-width: 400px;
margin: 0 auto;
color:#fff;
fill: #fff;
}
text {
cursor: pointer;
}
.icon:hover{
cursor: pointer;
}
.icon:hover .chart{
fill: #FAF;
-webkit-animation: color 5s;
animation: color 5s forwards alternate;
}
#-webkit-keyframes color{
0%{ fill : #FFF;}
10%{ fill : #508694;}
50%{fill: #FBB03B;}
90%{ fill : #D19B6F;}
100%{ fill : #FFF;}
}
#keyframes color{
0%{ fill : #FFF;}
10%{ fill : #508694;}
50%{fill: #FBB03B;}
90%{ fill : #D19B6F;}
100%{ fill : #FFF;}
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="chart" viewBox="0 0 1042 1024">
<path class="chart" d="M893.78 455.769h145.017v568.231h-145.017v-568.231z" />
<path class="chart" d="M671.815 0h145.017v1024h-145.017v-1024z" />
<path class="chart bar3" d="M446.89 624.462h145.017v396.578h-145.017v-396.578z" />
<path class="chart" d="M224.925 227.884h145.017v796.116h-145.017v-796.116z" />
<path class="chart" d="M0 71.029h145.017v952.971h-145.017v-952.971z" />
</symbol>
<symbol id="compass" viewBox="0 0 46.6 46.6">
<path class="compas__outer" fill="#FFFFFF" d="M22.7,0C10.2,0,0,10.2,0,22.7c0,12.5,10.2,22.7,22.7,22.7 c12.5,0,22.7-10.2,22.7-22.7C45.4,10.2,35.3,0,22.7,0L22.7,0z M22.7,42.9c-11.1,0-20.1-9-20.1-20.1c0-11.1,9-20.1,20.1-20.1 c11.1,0,20.1,9,20.1,20.1C42.9,33.8,33.8,42.9,22.7,42.9L22.7,42.9z M22.7,42.9"/>
<path class="compass__needle" fill="#FFFFFF" d="M24.7,20.7C24,20,23,19.7,22,19.9l1.5-1.5l-12-6.9l6.9,12l1.5-1.5 c-0.2,0.9,0,2,0.8,2.7c0.7,0.7,1.8,1,2.7,0.8L21.9,27l12,6.9l-6.9-12l-1.5,1.5C25.7,22.5,25.5,21.4,24.7,20.7L24.7,20.7z M21.8,23.6c-0.5-0.5-0.5-1.3,0-1.8c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.3,0,1.8C23.1,24.1,22.3,24.1,21.8,23.6L21.8,23.6z M31.9,31.9l-8.7-5.1l3.7-3.7L31.9,31.9z M31.9,31.9">
<animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 22.7 22.7" to="360 22.7 22.7" repeatCount="indefinite" />
</path>
</symbol>
<symbol id="linked-in" viewBox="0 0 1070 1024">
<path d="M241.778 1024v-689.778h-227.556v689.778h227.556zM128 238.222c78.222 0 128-53.333 128-120.889s-46.222-117.333-128-117.333c-78.222 0-128 49.778-128 120.889 0 64 49.778 117.333 128 117.333v0 0zM369.778 1024c0 0 3.556-625.778 0-689.778h227.556v99.556c28.444-46.222 85.333-117.333 209.778-117.333 149.333 0 263.111 99.556 263.111 309.333v394.667h-227.556v-366.222c0-92.444-32-156.444-117.333-156.444-64 0-99.556 42.667-117.333 85.333-7.111 14.222-7.111 35.556-7.111 56.889v384h-231.111z" fill="#FFF"/>
</symbol>
</svg>
<div class="wrapper">
<h1>CSS #keyframe</h1>
<svg role="img" class="icon" width="400" height="200">
<!-- I had to get it out of the <use> because webkit browsers ##ø‡~! http://codepen.io/AmeliaBR/pen/lshrp-->
<g id="chart">
<path class="chart" d="M172.1,90.6H200V200h-27.9V90.6L172.1,90.6z"/>
<path class="chart" d="M129.3,2.8h27.9V200h-27.9L129.3,2.8L129.3,2.8z"/>
<path class="chart" d="M86,123.1H114v76.4H86V123.1L86,123.1z"/>
<path class="chart" d="M43.3,46.7h27.9V200H43.3L43.3,46.7L43.3,46.7z"/>
<path class="chart" d="M0,16.5h27.9V200H0C0,200,0,16.5,0,16.5z"/>
</g>
<use xlink:href="#chart" id="charts" x="100"></use>
</svg>
<h1>SMIL animateTransfrom</h1>
<svg viewBox="0 0 1024 1024" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 80%; height: 70px; overflow: visible">
<use xlink:href="#compass"></use>
</svg>
<h1>Javascript</h1>
<svg viewBox="0 0 1024 1024">
<use xlink:href="#linked-in" id="linked"></use>
<text id="p" font-size="200" y="140" x="650">+</text>
<text id="m" font-size="200" y="140" fill="" x="800">-</text>
</svg>
</div>
Try this; change the viewBox of the symbol to be closer to size it was designed in. I did a quick look for the outer dimensions of the paths, then assumed 100x100.
<symbol id="compass" viewBox="0 0 100 100">
CodePen: http://codepen.io/rfornal-ssi/pen/GgWMvZ
I only adjusted one part, assuming that you can more forward with the rest of the code from this point.
UPDATE:
Based on testing by the OP, we learned that add viewBox to the <svg> tag itself is not needed since <symbol> tags are used.