How to move SVG clip-path 40% to the right ?
https://jsfiddle.net/vtgmsyg0/
My nested "svg" is not responding to specified for it "x coordinate" of value 40%...
I used nested SVG for this...
<svg width="120%" height="855">
<svg width="900px" height="855px" x="40%" y="10">
<clipPath id="uniqueId" >
<path transform="translate(0,664.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none"d="M23 6616 c32 -51 1686 -2932 1691 -2946 4 -11 -57 -52 -226 -150
-127 -75 -231 -139 -232 -142 -2 -11 1959 -3368 1967 -3368 5 0 505 288 1112
640 607 352 1107 640 1112 640 4 0 37 -50 72 -110 l64 -110 47 27 c26 16 626
368 1334 783 922 541 1285 759 1283 770 -3 8 -320 562 -706 1230 -387 668
-703 1219 -704 1223 -2 8 550 327 2073 1198 l575 329 -4100 -1 c-2255 0 -4387
2 -4738 4 l-638 5 14 -22z"/>
</clipPath>
</svg>
</svg>
Change the X value in the translate() component of the transform attribute. To move it left, make it a negative value. 40% of 900 is 360 so the following should be about right:
transform="translate(-360, 664.000000) scale(0.100000,-0.100000)"
body {
overflow-x:hidden;
}
.mega {
position:absolute;
width:120%;
height:100%;
clip-path: url("#uniqueId");
overflow-x:hidden;
}
<!-- This is the video used for SVG clipping -->
<video autoplay="" loop="" class="mega">
<source src="https://gekos.pl/wp-content/themes/gekos/video/slider.mp4" type="video/mp4">
<source src="https://gekos.pl/wp-content/themes/gekos/video/slider.ogg" type="video/ogg">
<source src="https://gekos.pl/wp-content/themes/gekos/video/slider.webm" type="video/webm">
</video>
<!-- Code below is where I am applying clipping the the video, my nested "svg" is not responding to specified for
it "x coordinate" of value 40% -->
<svg width="120%" height="855">
<svg width="900px" height="855px">
<clipPath id="uniqueId" >
<path transform="translate(-360, 664.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none"d="M23 6616 c32 -51 1686 -2932 1691 -2946 4 -11 -57 -52 -226 -150
-127 -75 -231 -139 -232 -142 -2 -11 1959 -3368 1967 -3368 5 0 505 288 1112
640 607 352 1107 640 1112 640 4 0 37 -50 72 -110 l64 -110 47 27 c26 16 626
368 1334 783 922 541 1285 759 1283 770 -3 8 -320 562 -706 1230 -387 668
-703 1219 -704 1223 -2 8 550 327 2073 1198 l575 329 -4100 -1 c-2255 0 -4387
2 -4738 4 l-638 5 14 -22z"/>
</clipPath>
</svg>
</svg>
Related
This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 11 months ago.
I have this static existing svg that I have difficulties changing the color.
<img class="icon-shop" src="#/assets/icon-shop.svg"/>
<style>
.icon-shop {
width: 32px;
fill: orange;
stroke: orange;
}
</style>
I've found a solution using filter attribute but it shouldn't be this complicated.
filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg)
brightness(104%) contrast(88%);
Sample is this if you change the fill="YOUR COLOR" that should change. You can view any svg on any text editor and change from there.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="red" stroke="none">
<path d="M212 2613 c-128 -45 -197 -230 -142 -376 26 -70 122 -200 188 -255
39 -33 219 -160 962 -678 41 -28 104 -67 140 -85 58 -30 74 -34 145 -34 74 0
85 3 150 39 39 21 165 104 280 185 116 81 341 239 502 350 217 151 310 221
361 275 108 114 152 208 153 328 1 119 -63 215 -171 253 -37 13 -209 15 -1284
14 -1087 0 -1246 -2 -1284 -16z"/>
<path d="M50 1228 c0 -745 -2 -723 72 -798 22 -23 58 -50 81 -61 40 -18 87
-19 1297 -19 l1255 0 50 24 c55 25 105 76 132 134 16 34 18 95 21 705 2 367 0
667 -3 667 -3 0 -34 -24 -69 -54 -36 -30 -106 -83 -158 -117 -160 -107 -596
-411 -753 -523 -304 -219 -447 -257 -656 -175 -88 36 -129 62 -546 355 -142
99 -337 234 -433 300 -96 65 -200 143 -232 173 l-58 53 0 -664z"/>
</g>
</svg>
Could someone help me with the amination of an svg?
I am trying to create an animation of the pump impeller. What I want is for the last 4 elements of svg to do a rotating impeller effect. Make it look like it is rotating. The real effect would be to raise the elements one position and the one that is left above appears below and so on while it is on. I have no idea how it could be done. Thanks a lot
Image svg
icon_return_pump_1:
styles:
custom_fields:
icon:
- margin-left: -15%
custom_fields:
icon: >
[[[
let state = 'on';
return `
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="55.000000pt" height="55.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<style>
.start {
}
.on {
}
.end {
}
.start_timeout {
}
.end_timeout {
}
#keyframes on {
0% {
transform: scale(0.5);
}
20% {
transform: scale(1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
transform-origin: center;
}
</style>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path fill="#9da0a2" d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z"/>
<path fill="#9da0a2" d="M960 2400 l0 -1120 160 0 160 0 0 -80 0 -79 -429 -3 c-416 -3 -430 -4 -457 -24 -64 -47 -69 -63 -69 -214 0 -151 5 -167 69 -214 l27 -21 2139 0 2139 0 27 21 c64 47 69 63 69 214 0 151 -5 167 -69 214 -27 20 -40 21 -537 24 l-509 3 0 159 0 160 160 0 160 0 0 80 0 80 -480 0 -480 0 0 -80 0 -80 160 0 160 0 0 -160 0 -160 -880 0 -880 0 0 80 0 80 160 0 160 0 0 1120 0 1120 -480 0 -480 0 0 -1120z"/>
<path fill="#9da0a2" d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z"/>
<path fill="#9da0a2" d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z"/>
<path fill="#9da0a2" d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
<path fill="#9da0a2" d="M3040 3280 l0 -80 480 0 480 0 0 80 0 80 -480 0 -480 0 0 -80z"/>
<path fill="#9da0a2" d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z"/>
<path class="${state}" fill="#9da0a2" d="M3040 2880 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
<path class="${state}" fill="#9da0a2" d="M3040 2400 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
<path class="${state}" fill="#9da0a2" d="M3040 1920 l0 -160 480 0 480 0 0 160 0 160 -480 0 -480 0 0 -160z"/>
</g>
</svg>
`;
]]]
This is how I would do it: I would replace those paths with a very thick line with a stroke-dasharay and I would animate the stroke-dashoffset of the line.
#keyframes on {
100% {
stroke-dashoffset:1920
}
}
.on {
animation: on 0.8s infinite;
}
<svg viewBox="0 0 512.000000 512.000000"width="200" >
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#9da0a2" stroke="none">
<path d="M895 4466 c-37 -17 -70 -52 -84 -89 -6 -16 -11 -78 -11 -138 0 -105 2 -113 39 -202 43 -100 85 -235 96 -310 l7 -47 498 0 498 0 7 47 c11 75 53 210 96 312 l41 94 -4 123 c-3 133 -10 153 -72 198 -27 21 -40 21 -554 23 -424 2 -533 0 -557 -11z" />
<path d="M960,2400L960,1280L1120,1280L1280,1280L1280,1200L1280,1121L851,1118C435,1115,421,1114,394,1094C330,1047,325,1031,325,880C325,729,330,713,394,666L421,645L2560,645L4699,645L4726,666C4790,713,4795,729,4795,880C4795,1031,4790,1047,4726,1094C4699,1114,4686,1115,4189,1118L3680,1121L3680,1280L3680,1440L3040,1440L3200,1440L3360,1440L3360,1280L3360,1120L2480,1120L1600,1120L1600,1200L1600,1280L1760,1280L1920,1280L1920,2400L1920,3520L1440,3520L960,3520L960,2400Z" />
<path d="M2238 3439 l-158 -79 0 -960 0 -960 160 -80 160 -80 0 1120 c0 616 -1 1120 -2 1119 -2 0 -74 -36 -160 -80z" />
<path d="M2560 2400 l0 -1120 160 80 160 80 0 960 0 960 -160 80 -160 80 0 -1120z" />
<path d="M4160 2400 l0 -960 33 0 c65 1 174 31 257 71 164 81 297 253 335 434 11 54 15 155 15 455 0 439 -4 474 -71 610 -58 118 -161 221 -279 279 -83 40 -192 70 -257 71 l-33 0 0 -960z" />
<path d="M415 3346 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -406 -3 -864 3 -822 3 -832 24 -859 39 -53 71 -69 134 -69 63 0 95 16 134 69 18 23 22 45 24 137 l4 109 79 0 79 0 0 640 0 640 -79 0 -79 0 -4 109 c-3 118 -12 141 -70 184 -33 25 -113 32 -153 13z"/>
<path class="on" stroke="#9da0a2" stroke-width="970" d="M3530 3360V1440" stroke-dasharray="250 150" />
</g>
</svg>
Observation: I've modified the second path since I wanted to remove the bit corresponding to the rotating engine.
import Image from 'next/image'
...
<Image src="/emotion.svg" alt="emtion" width={50} height={50} />
I want to change the SVG color in next/image.
But in CSS,
img {
fill="#ffffff"
}
is not working.
How can I solve this?
I recommend you to not to use svg files directly, but use Playground SVG (https://react-svgr.com/playground/), convert the file to JS and then you can change the color and other stuff by props.
I am using Next/Image and inserting the SVG url dynamically. For this case I needed to use css filter to somehow change the SVG color.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
I think the best solution here is not to use Image. by default the nextjs Image component is not doing any optimization on svg's. You will then have multiple options/solutions to your problem:
Extend webpack config on your next.config.js file using #svgr/webpack:
// next.config.js
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
}
// The file where u want to import the svg
import YourSvg from './public/yourSvg.svg'
// I recommend using the `currentColor` property on your svg, but you can also pass the color as prop
<YourSvg color="red" />
Using babel-plugin-inline-react-svg: https://github.com/vercel/next.js/discussions/20993#discussioncomment-760119
Well, the solution that I have found is practical. I edit the svg and change the color. When I select the svg in vscode it shows me all its configuration.
This svg will change the color to pink:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="128.000000pt" height="128.000000pt" viewBox="0 0 128.000000 128.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#D2485A" stroke="none">
<path d="M647 1233 c-13 -15 -17 -38 -17 -102 l0 -83 -84 -97 c-47 -53 -109
-123 -140 -156 l-55 -60 -1 58 0 57 -175 0 -175 0 0 -400 0 -400 175 0 175 0
0 31 c0 23 4 30 14 26 8 -3 57 -20 108 -38 l93 -33 265 -3 c300 -5 316 -2 354
72 17 33 18 43 8 81 -10 39 -9 48 8 76 22 36 26 98 9 129 -8 16 -5 26 15 50
28 33 35 93 16 129 -8 15 -4 27 15 56 30 44 32 88 5 131 -34 56 -61 63 -235
63 -106 0 -155 3 -155 11 0 6 7 36 16 66 25 85 17 198 -18 251 -52 78 -182
128 -221 85z m113 -85 c42 -29 70 -82 70 -133 0 -22 -13 -87 -30 -145 -16 -58
-30 -108 -30 -112 0 -5 87 -8 193 -8 158 0 197 -3 215 -16 40 -28 26 -80 -24
-90 -30 -6 -34 -10 -34 -39 0 -24 6 -34 24 -43 50 -22 41 -85 -14 -97 -25 -6
-30 -11 -30 -37 0 -20 8 -37 25 -50 27 -21 33 -59 12 -76 -6 -6 -24 -13 -40
-17 -23 -6 -27 -13 -27 -40 0 -25 5 -35 20 -40 24 -7 37 -51 23 -74 -9 -14
-44 -16 -279 -16 l-269 0 -107 39 -108 38 0 215 0 216 88 95 c262 286 262 285
262 379 0 82 6 87 60 51z m-480 -698 l0 -320 -100 0 -100 0 0 320 0 320 100 0
100 0 0 -320z"/>
</g>
</svg>
here where it says fill I change the color:
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
fill="#D2485A" stroke="none">
I want to have an SVG next to a div with some text.
The SVG should preserve its aspect ratio while scaling to match the height of the parent.
The parent should only be tall enough to fit the text in the other flex item.
I would like to make this a component that will be reusable with different amounts of text.
I have tried a few approaches, and the closest I have gotten that keeps the SVG from disappearing in Chrome is in this codepen: https://codepen.io/rosshathaway/pen/ExjePpM. The problem is the SVG is taking up as much space as possible.
CSS:
* {
box-sizing: border-box;
}
.outer {
display: flex;
}
.inner {
margin: 4px;
border-top: dotted 8px black;
border-right: dotted 8px black;
border-bottom: dotted 8px black;
padding: 0.5em 2em;
}
.logo {
position: relative;
height: 0;
width: 100%;
padding: 0;
padding-bottom: 100%;
}
svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
HTML:
<div class="outer">
<div class="logo">
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 93 93"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0, 93) scale(0.100000,-0.100000)"
fill="#231f20"
stroke="none"
>
<path
d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
/>
<path
d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
/>
<path
d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
/>
</g>
</svg>
</div>
<div class="inner">
A few <br>
lines <br>
of text <br>
bla bla bla bla bloop <br>
aADSF<br>
gljsdf
</div>
</div>
Thanks.
In general this is not specific SVG issue.
Issue 1 - "remove the aspect ratio CSS trick"
padding-bottom: 100%; is a trick for 1:1 Aspect Ratio box - in your case the `svg1 icon is already a square (So remove those extra styles)
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
Issue 2
You set two cols - one with text and one with image.
The flex-basis property specifies the initial length of a flexible item. https://www.w3schools.com/cssref/css3_pr_flex-basis.asp
flex-basis by deafult is auto.
auto ==> The browser will calculate and select a width for the specified element (width mdn docs). So the result looks "buggy"(huge image and small col of text):
* {
box-sizing: border-box;
}
.outer {
display: flex;
border: dotted 8px red;
}
.inner {
}
.logo {
width: 100%;;
height: auto;
}
<div class="outer">
<div class="logo">
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 93 93"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0, 93) scale(0.100000,-0.100000)"
fill="#231f20"
stroke="none"
>
<path
d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
/>
<path
d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
/>
<path
d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
/>
</g>
</svg>
</div>
<div class="inner">
A few <br>
lines <br>
of text <br>
bla bla bla bla bloop <br>
aADSF<br>
gljsdf
</div>
</div>
one solution - add flex-grow: 1; to text-col
flex-grow: 1; - The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value. https://cssreference.io/property/flex-grow/
For the svg add any width you want (20%, 100px or 20em).
.flex-container {
display: flex;
border: 1px dashed orange;
}
#col1{
max-width: 100%;
border: 3px dashed violet;
}
#col2{
border: 2px dashed blue;
flex-grow: 1;
}
svg {
height: auto;
width: 150px;
}
<section class="flex-container">
<div id="col1">
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 93 93"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0, 93) scale(0.100000,-0.100000)"
fill="#231f20"
stroke="none"
>
<path
d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
/>
<path
d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
/>
<path
d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
/>
</g>
</svg>
<br>
width: 150px;
</div>
<div id="col2" class="col">
A few <br>
lines <br>
of text <br>
bla bla bla bla bloop <br>
aADSF<br>
</p>
gljsdf
</div>
</section>
Related stackoverflow Q:
Make div fill remaining *horizontal* space in flexbox
I ended up making a new SVG that includes the border. This will scale properly, but the size of the dots for the border and the space between them will change instead of making or removing dots that are the original size like the CSS border would do.
body {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='#3F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='#FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14 124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent;
}
Please find the inline SVG in the CSS. This doesn't show anything in the background. not getting any issue as well. Please let me know if this is the right way of creating the background ? please note I am using Firefox. Same works in Chrome.
Firefox doesn't like the # in your data URL. Replace all the hashes with %23.
body {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%233F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%23FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14 124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent;
}
When you use background-image reference the svg as a file with a a path.
background-image: url(http://www.domain.com/path/img.svg);
So put all of that code that makes the svg into a text file, then change the extension from .txt to .svg
If you want to use it inline convert your svg with this tool: http://www.mobilefish.com/services/base64/base64.php
.imgSVG {
background: url("data:image/svg+xml;base64,[data]");
}
[data] portion is where you place whatever you get from the online tool.
SVG: https://css-tricks.com/using-svg/
URI: https://css-tricks.com/data-uris/