I get my SVGs on IcoMoon and the way I integrate them is the following:
I have a "sprite.svg" file in my project that contains all "symbols", e.g:
<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-search" viewBox="0 0 32 32">
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 32 32">
<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
</symbol>
... and so on
</defs>
</svg>
Then in my HTML:
<svg class="icon icon-twitter">
<use xlink:href="sprite.svg#icon-twitter"></use>
</svg>
Then I set the height/width/color with CSS
.icon {
fill: $color-white;
height: 2rem;
width: 2rem;
}
It works everywhere EXCEPT on Firefox which won't show any of my SVGs. Any idea what's going on?
EDIT: the SVGs are in the DOM alright and when I hover on them with the inspector it shows the space they take, they just don't display
EDIT 2: I made it to work using the traditionnal way I guess, i.e not using the sprite.svg file:
<svg class="icon icon-chevron-down--filter-by" viewBox="0 0 20 20" >
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
</svg>
Firefox now recognizes the icons but I would still prefer just using <use xlink:href="sprite.svg#icon-search"></use> instead of passing the whole path each time... If you guys have a solution it's cool, otherwise, well, at least it works
Fixed it, I actually had an unclosed <symbol> tag in my sprite.svg file that was screwing everything up and that's the reason most of my SVGs were not showing
Related
this is the raw code I've received. Just a cross defined as a polygon :
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 115.9 80" style="enable-background:new 0 0 115.9 80;" xml:space="preserve">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5
78.8,40.5 "/>
</svg>
and this is what I've done :
<svg class="icons" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<symbol id="cross">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5 78.8,40.5" style="fill:#6511e4;"/>
</symbol>
</svg>
<div class="cross">
<svg viewBox="0 0 115.9 80" width="15" height="15">
<use href="#cross" id="cross-1"/>
</svg>
</div>
following the solution for the same problem someone else had (Cannot Change SVG <use> icon size when linked to <symbol>)
but this is not working :/ I just want for exemple to resize the cross with a 15px width and 15px height.
Could someone provide me the solution as well as some explanations ? thanks : )
If you encapsulate a SVG drawing in a symbol, the viewBox attribute moves from the <svg> to the <symbol> element.
The viewBox values of your source are not really helpful. A tight bounding box around the grafic can be achieved with viewBox="58.2 28.2 20.6 20.6". You can find it with the original file loaded in a browser. Then do
document.querySelector('polygon').getBBox()
The returned object provides you with x/y/width/height values you can feed into the viewBox.
I'd like to point out there is an implicit sizing going on here: The symbol is shown according to the x/y/width/height values of the <use> element where it is referenced. None of them are present; they default to 0 (position) and 100% (size). In other words: the <use> element just fills its surrounding <svg> element, where width and height are set.
<svg class="icons" width="0px" height="0px">
<symbol viewBox="58.2 28.2 20.6 20.6" id="cross">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5 78.8,40.5" style="fill:#6511e4;"/>
</symbol>
</svg>
<div class="cross">
<svg width="15" height="15">
<use href="#cross" id="cross-1"/>
</svg>
</div>
How is this done?
Code:
https://jsfiddle.net/p1rwuzf8/1/
This pattern svg when repeated.
https://i.imgur.com/sTACtMT.png
Should look like this.
https://i.imgur.com/E68BQFo.png
svg {
background-repeat: repeat;
}
<svg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
One way of doing this would be using the image as background-image. For this you would need first to encode the svg image, for example using this tool: SVG encoder
div{width:200px;
height:300px;
border:1px solid;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23000'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
<div></div>
An other way of doing it would be using SVG patterns. For this you need to take the group used to draw the "brick" and use it in a pattern like so:
<svg width="200" height="300" viewBox="0 0 200 300">
<defs>
<pattern id="brick" width='42' height='44' patternUnits='userSpaceOnUse'> >
<g id="Page-1" fill="none" fill-rule="evenodd"><g id="brick-wall" fill="#000"><path d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/></g></g>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#brick)"></rect>
</svg>
I am creating SVG path in typescript but SVG path is not displaying in the web page but in inspect element, the elements are showing. In the inspect element, svg's path is showing size as 0x0. My code is below. Please help me.
<svg id="svg1" viewbox="-100 -100 500 500" class="svgStyle" xmlns="http://www.w3.org/2000/svg" style="position: absolute;" width="300px" height="300px" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path id="arc2" fill="none" stroke="#F1F1F1" stroke-width="40" stroke-linecap="round" d="M 234.8528137423857 234.8528137423857 A 120 120 0 1 0 65.14718625761428 234.8528137423857"></path>
</svg>
I'm new to SVG. I'm trying to put a SVG file with linkable regions (like an image map) on my page and make it responsive. The SVG displays, but the linkable areas aren't working in Chrome. Works fine in FF, IE11, and Edge.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 880 371" style="enable-background:new 0 0 880 371;" xml:space="preserve">
<g id="Background_xA0_Image_1_">
<image style="overflow:visible;" width="880" height="371" id="Background_xA0_Image" xlink:href="data:image/jpeg;... />
</image>
</g>
<g id="Layer_2_xA0_Image_1_">
<a id="Layer_2_xA0_Image" xlink:href="http://www.example.com" transform="matrix(1 0 0 1 572 215)">
<image style="overflow:visible;" width="195" height="42" xlink:href="data:image/png;...>
</image>
</a>
</g>
<g id="Layer_1_xA0_Image_1_">
<a id="Layer_1_xA0_Image" xlink:href="http://www.anotherexample.com" transform="matrix(1 0 0 1 308 164)">
<image style="overflow:visible;" width="137" height="46" xlink:href="data:image/png;...>
</image>
</a>
</g>
</svg>
I'm working with a JPG file that I sliced up in Photoshop and then exported to a SVG from Illustrator. This is the code it produced.
Just realized elements within the svg are clickabel - the problem was actually the cursor not changing styles so I thought it wasn't working.
I added cursor:pointer; to the links and it looks good now.
So I can make the following path, but I need the shape flipped so that the flat joining line (X) is on the bottom. I also need it to stretch the full width of its container.
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L30 50 L100 0 Z"></path>
</svg>
With respect to flipping the shape, you can use a transform on the path, scaling the y-axis by -1. This will flip the shape up and "out" of view, so you also need to translate it down. If you want it to end up with exactly the same upper and lower boundaries as pre-flipped (as opposed to, say, at the bottom of its container, etc.) then you have to translate it down by the height of the shape, i.e. 50px in your example.
With respect to wanting it stretched to the full width of its container, the code in your question already contains the answer, i.e. width="100%". This is shown by placing the triangle into a div that is 250px wide. Contrast this with the original shape (on the left) with width of 100 not 100%.
div {
width: 250px;
height: 70px;
border: solid red 2px;
}
original: unflipped, untranslated, unstretched:
<div>
<svg id="bigTriangleColor2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 0) scale(1, 1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>
altered: flipped, translated, stretched:
<div>
<svg id="bigTriangleColor1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 50) scale(1, -1)" d="M0 0 L30 50 L100 0 Z"></path>
</svg>
</div>