I'm currently uninstalling a page builder on my website, but I want to keep some of its styles.
I copied the html of an element, it used to have a red color on the stripes which are now black/grey, but I got problems changing the color of them.
Only color I can change is the background.
<svg xmlns="http://www.w3.org/2000/svg" style="max-height:100px;
margin-bottom: 30px;" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path style="width: 2500px;" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
<path style="width: 2500px;" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
<path style="width: 2500px;" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>
Thanks for any help in advance!
You probabily want to include the css files from your page builder to add the style to your HTML page.
But for now, if you want your <svg> to be red use the property fill:
path {
fill: red;
}
<svg xmlns="http://www.w3.org/2000/svg" style="max-height:100px;
margin-bottom: 30px;" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path style="width: 2500px;" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
<path style="width: 2500px;" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
<path style="width: 2500px;" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>
Related
I need to import svg from sprite by <use> tag so svg and use were the same size (use was as large as parent svg tag).
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>
I have no idea what exactly causes that size difference, and how could I fix it.
Here is my demo, for those who would like to help me:
svg {
width: 200px;
height: 200px;
position: relative;
}
use {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<svg width="0" height="0" class="hidden">
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 44 44" id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<defs>
<polygon id="path-1" points="0.001 0 40 0 40 40 0.001 40"></polygon>
</defs>
<g id="ThirdParty/Facebook/1.-Liquorice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(2.000000, 2.000000)">
<g id="Clip-2"></g>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88" mask="url(#mask-2)"></path>
</g>
</g>
</symbol>
</svg>
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>
As I've commented: use a viewBox for the second svg. Try <svg viewBox="0 0 40 40"><use ...
Also: in css you are forcing both evg elements to a 200px / 200px size. You can add width="200" instead.
Also: the css roules for use are pointless.
Also: you are putting a useless polygon inside a useless <defs> inside the symbol. You can delete the defs.
More: The path is wrapped inside lots of groups. There is an empty group too. The path is masked by an inexistent mask-2.
I've removed the useless groups and the mask attribute. Please take a look:
<svg width="0" height="0" class="hidden">
<symbol id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88"></path>
</symbol>
</svg>
<svg viewBox="0 0 40 40" width="200">
<use xlink:href="#facebook-hover"></use>
</svg>
I have a https://github.com/rajamunuma/test/blame/main/test.svg file with below content
<svg width="100" height="100">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
<title>checkmark icon</title>
<path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
<svg>
I would like to use the use the symbol "icon-checkmark" in the html file directly. Something like below
<img src="https://github.com/rajamunuma/test/blame/main/test.svg#icon-checkmark" />
<img src="https://github.com/rajamunuma/test/blame/main/test.svg#svgView(viewBox(0,0,16,13))" />
Note: I cannot directly copy the content of svg file into my html file. I want to refer to svg file path and include it on the html page.
You need to define symbol icon like below snippet.
I hope below snippet will help you a lot.
Helpful link:
https://css-tricks.com/svg-symbol-good-choice-icons/
.icon {
stroke: unset;
stroke-width: 0px;
fill: currentColor;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
}
<svg class="icon">
<use href="#icon-checkmark"></use>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-checkmark" viewBox="0 0 16 13">
<path d="M13.189,0,6.054,7.258,2.811,3.9,0,6.825l3.243,3.358h0L6.054,13,16,2.817Z" fill-rule="evenodd"/>
</symbol>
<svg>
I have some silhouette type images and they need to be able to change color, sometimes just to display in different locations, sometimes for hover effects.
This is easy enough to do with the SVG directly embedded into the HTML. Copy-paste and CSS to your heart's desire.
But then I have to copy-paste or programatically insert everywhere I want it. Some of these are used dozens of times. It just seems poor practice to re-transmit the same SVG markup repeatedly.
Is there a best-of-both-worlds solution, where I can CSS the paths and also somehow reuse the SVG on the front-end?
There is a tag in svg that let's you reuse "symbols". I think that is as close as you'll get.
You create a symbol by wrapping your paths etc in a symbol-element. Give it an id (so you can re-use it later):
<svg style="display: none;">
<symbol id="ic">
<paths and polygons and other fun stuff>
</symbol>
</svg>
Now you can reuse this symbol with <use> and xlink:href pointing to the symbol you made. And you can add classes freely to change things up:
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#ic" class="ic-blue" x="0" y="0" />
</svg>
Examples and code shamelessly plucked from https://tympanus.net/codrops Go read their content and click their ads! If there ever was a site deserving an exception in your ad-blocker, this is it.
https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
body {
padding: 2em;
}
svg {
width: 100px;
height: 125px;
border: 1px solid #ddd;
}
use.ic-1 {
fill: skyblue;
}
use.ic-2 {
fill: #FDC646;
}
use.ic-3 {
fill: #FF2D49;
}
svg path {
fill: inherit;
}
<svg style="display: none;">
<symbol id="ic">
<path fill="#000000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844 c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442 c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933 c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04 c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929 C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907 c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48 c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631 c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z M50.01,86.723L27.73,49.13h44.541L50.01,86.723z"/>
</symbol>
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="ic-1" xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="ic-2" xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
<use class="ic-3" xlink:href="#ic" x="0" y="0" />
</svg>
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.
I have this svg file which I want to use with different colors
I have tried the following
<object type="image/svg+xml" width="100" height="100" data="todo.svg">
<span/>
</object>
(Not sure if OBJECT is the correct element for this)
Here is the content of todo.svg
<svg version="1.1" id="Layer_1" xmlns="..." x="0px" y="0px"
width="156px" height="141.6px" viewBox="0 0 156 141.6" enable-background="new 0 0 156 141.6" xml:space="preserve">
<g>
....
<g id="bar">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="..."/>
</g>
</g>
....
So in the css I tried to style this as follows
#bar path { fill: #444; }
Doesn't work :( Any suggestions how I can change this svg property using css ?