I've tried a bunch of different things, but can't figure out how to get this SVG twitter icon to shrink to 24x24 when it's wrapped in a link. I've tried viewbox, tried setting setting width/height, but can't seem to figure it out. In chrome, the below code produces a 24x24 container but the SVG itself is 400x400 so I only see the top left corner. Seems like I'm missing something obvious, but any help would be appreciated.
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="24px" height="24px" viewBox="0 0 24 24">
<style type="text/css">
.st0{fill:#1DA1F2;}
.st1{fill:#FFFFFF;}
</style>
<g id="Dark_Blue">
<path class="st0" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300
C400,377.6,377.6,400,350,400z"/>
</g>
<g id="Logo__x2014__FIXED">
<path class="st1" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6
c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2
c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8
c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8
c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7
C97.7,293.1,124.7,301.6,153.6,301.6"/>
</g>
</svg>
</a>
SVG is all about the viewBox, this SVG should have a 400 x 400 viewbox
<style>
svg {
width: 80px;
height: 80px;
background: lightcoral
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#1da1f2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300C400,377.6,377.6,400,350,400z"/>
<path fill="white" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7 C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<path fill="#1da1f2" d="M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300C400,377.6,377.6,400,350,400z"/>
<path fill="white" d="M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7 C97.7,293.1,124.7,301.6,153.6,301.6"/>
</svg>
Or optimized
<style>
svg {
width:80px;
height:80px;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect fill="#1da1f2" width='100%' height='100%' rx="15%"/>
<path fill="white" d="M39 76c24 0 37-20 37-37c0-1 0-1 0-2c3-2 5-4 7-7
c-2 1-5 2-8 2c3-2 5-4 6-7c-3 2-5 3-8 3c-2-3-6-4-9-4c-7 0-13 6-13 13c0 1 0 2 0 3
c-11-1-20-6-27-14c-1 2-2 4-2 7c0 5 2 9 6 11c-2 0-4-1-6-2
c0 0 0 0 0 0c0 6 5 12 10 13c-1 0-2 1-4 1c-1 0-2 0-3 0c2 5 7 9 12 9
c-5 4-10 6-16 6c-1 0-2 0-3 0C25 73 31 76 39 76"/>
</svg>
The viewport should be the size of the original content (400). Since you are using a small viewport (24), the image only shows a portion of the entire svg. Make the viewport 400 and then use height and width to get the size in which the svg will be presented.
Note: Also you should remove the any px from the height and width.
You this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24" height="24" viewBox="0 0 400 400">
Simple solution
.twitter-share-button >svg{
height:24px;
width:24px;
}
Related
HTML:
<svg>
<use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>
SVG sprite:
<svg width="0" height="0" class="hidden">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
<path ... fill="currentColor"></path>
</symbol>
</svg>
Is there any way to use SVG sprite from CSS
Like this
<div class=“icon”></div>
.icon {
background-image: “/assets/images/icons-sprite.svg#icon-name”
height: 30px
}
I’m using the technique for including SVGs described here whereby you create a doc that looks something like this…
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="arrow-left" viewBox="0 0 10 16">
<path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>
</symbol>
<symbol id="arrow-right" viewBox="0 0 10 16">
<path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>
</symbol>
</svg>
Include it in the top of your HTML and then insert the SVG icons in your markup like this…
<svg class="arrow-right">
<use xlink:href="#arrow-right" />
</svg>
It’s easy and works great. However, I’m trying to use the same icons in my CSS pseudo classes :before and :after using an empty content attribute and the SVG in the background. Something like this…
.title:after {
float: right;
width: 16px;
height: 10px;
content: "";
background: url('#arrow-right');
}
Whenever I try to position a scaled SVG with position: absolute;, and use 0 as the positioning parameter (i.e. top:0;) the svg does not seem to connect seamlessly.
Especialy when zooming or when creating a responsive layout, this seems to occure.
Consider the following example:
an item with SVG's as rounded corners:
<div class="item">
<svg class="corner top-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner top-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
</div>
The corners are positioned with position: absolute; and rotated in css
.corner {
position: absolute;
height: 20px;
}
.top-left {
left: 0;
top: 0;
}
.top-right {
top: 0;
right: 0;
transform: rotate(90deg);
}
.bottom-left {
bottom: 0;
left: 0;
transform: rotate(-90deg);
}
.bottom-right {
bottom: 0;
right: 0;
transform: rotate(180deg);
}
Now, depending on your screen resolution, you'll see the corners won't all fit seamlessly to the edge. Also when zooming in/out to the website oyu'll see a gap between the SVG and the edge of the element.
A dirty fix is to just offset the element minus 1 pixel in the direction it is positioned. However, the gap seems to be smaller than 1 pixel, thus breaking the design of the element when offsetting 1 pixel. Also, the gap does not appear all the time, only at certain pixel breakpoints.
Does anyone know how to fix this?
FIDDLE
To clarify, I want to prevent these lines from happening:
I'm not sure there is a particularly elegant solution to this problem. It affects Firefox mostly, because I believe Chrome/Webkit tends to snap elements to pixel boundaries, whereas Firefox doesn't.
One solution is to alter your paths so that they draw slightly outside the SVG and then set the <svg> to overflow="visible".
<svg class="corner top-left" ...snip... viewBox="0 0 10 10" overflow="visible">
<path class="st0" d="M10,0 V-2H-2V10H0c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
</svg>
Here, for this top-left SVG, I have created a two-unit "porch" up and to the left. Then if overflow is set to visible, the path will overdraw the little red lines caused by anti-aliasing/rounding.
Here's a demo fiddle with (only) the top left SVGs modified.
On an element with a background (image or solid color don't really matter):
<header id="block-header"></header>
I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this:
<header id="block-header">
…
<svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
…
</header>
You can run the code snippet below or check the JSFiddle. You can see original SVG image (in black) put inline, having curviness along the bottom and being responsive. In contrast, the red rectangle shows the same image applied (or, rather, not applied) as a clip-path.
I guess I misunderstand either viewBox or preserveAspectRatio attributes though can not find what is exactly wrong here. Any help would be appreciated.
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>
<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
<svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
</header>
References to SVG clip paths are to the clip path definitions themselves and the dimensions or other attributes of the <svg> are meaningless in this context.
What is happening in your example is that you are applying a 4000 px wide clip path to your header. Which is probably only of the order of 900 px wide. So the curvature isn't visible.
If you want a responsive clip path, you should define it using clipPathUnits="objectBoundingBox".
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/></svg>
<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
<svg width="0" height="0">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
</clipPath>
</defs>
</svg>
</header>
Fiddle here
I've been trying to apply a different color using fill to a svg with no success. No idea what I am doing wrong! This is my jsfiddle. Thanks.
You cannot change an SVG image in an img tag. You should inline the SVG image in your HTML like so:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24h-24z" fill="none"/>
<path class="check" d="M12 1l-9 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12v-6l-9-4zm-2 16l-4-4 1.41-1.41 2.59 2.58 6.59-6.59 1.41 1.42-8 8z"/>
</svg>
You can't change the color of an svg file. You need to have the actual svg tag with paths and not an img tag.
http://jsfiddle.net/hhoa8v9e/1/
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1" id="triangle">
<path d="M 100 100 L 300 100 L 200 300 z"
stroke="blue" stroke-width="3" />
</svg>
#triangle {
fill:blue;
}
If I embed an SVG sprite
<svg class="hidden-svg" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="208px" height="104px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve" >
<g id="phone2">
.....
</g>
</svg>
and reference an embedded icon as follows:
<svg viewBox="1 1 32 32" class="icon">
<use xlink:href="#phone2"></use>
</svg>
If is set the SVG sprite to:
.hidden-svg {
display: none;
}
It changes the look of my icon. See jsbin here.
What can I do to avoid changing the icon?
Use visibility:hidden instead of display:none and make the original SVG width="0" and height="0" so that it doesn't take up space.