Related
I am trying to center that base64 background-image inside an horizontal rectangle div, and it just does not work.
I know it should be pretty trivial and I looked into many almost similar questions here, but no trick worked. The image is not centered horizontally and i do not know why.
In fact, background-position does not seem to take any effect unless I use pixels explicitly.
you can see it in this playground:
https://codesandbox.io/s/solitary-worker-vvrx4?file=/index.html
.container {
background: red;
width: 100px;
height: 16px;
background-image:url("data:image/svg+xml;base64,...");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
Could somebody please help?
Thank you.
Looks like the problem is with your SVG. Made a fell changes on it and generated a new base64 that worked fine. I'm not so sure why this solved, though.
What I did:
Changed transform="rotate(90 8 8)" to transform="rotate(90)"
Added specific width and height properties width="160" height="160"
Heres the result
.icon {
background: red;
width: 100px;
height: 16px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.icon--broken {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDgpIiBmaWxsPSIjMzM5OWZmIj4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIxMy45IiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMTEuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDE1LjEsOSwxNiw3LjgsMTZzLTIuMS0wLjktMi4xLTIuMUM1LjcsMTIuNyw2LjcsMTEuOCw3LjgsMTEuOHoiLz4KPC9nPgo8Zz4KCTxjaXJjbGUgY3g9IjcuOCIgY3k9IjcuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDUuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDkuMSw5LDEwLDcuOCwxMFM1LjcsOS4xLDUuNyw3LjlDNS43LDYuOCw2LjcsNS44LDcuOCw1Ljh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIyLjEiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCwwQzksMCw5LjksMC45LDkuOSwyLjFjMCwxLjItMC45LDIuMS0yLjEsMi4xUzUuNywzLjMsNS43LDIuMUM1LjcsMC45LDYuNywwLDcuOCwweiIvPgo8L2c+Cjwvc3ZnPgo=");
}
.icon--fixed {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdHJhbnNmb3JtPSJyb3RhdGUoOTApIiBmaWxsPSIjMzM5OWZmIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCI+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgo8L3N2Zz4K");
}
<div class="icon icon--broken"></div>
<div class="icon icon--fixed"></div>
The problem is not CSS but the SVG image inside the base64 string. When you open it, you find the following code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" transform="rotate(90 8 8)" fill="#9c9c9c">
<g>
<circle cx="7.8" cy="13.9" r="1.7"/>
<path d="M7.8,11.8c1.2,0,2.1,0.9,2.1,2.1C9.9,15.1,9,16,7.8,16s-2.1-0.9-2.1-2.1C5.7,12.7,6.7,11.8,7.8,11.8z"/>
</g>
<g>
<circle cx="7.8" cy="7.9" r="1.7"/>
<path d="M7.8,5.8c1.2,0,2.1,0.9,2.1,2.1C9.9,9.1,9,10,7.8,10S5.7,9.1,5.7,7.9C5.7,6.8,6.7,5.8,7.8,5.8z"/>
</g>
<g>
<circle cx="7.8" cy="2.1" r="1.7"/>
<path d="M7.8,0C9,0,9.9,0.9,9.9,2.1c0,1.2-0.9,2.1-2.1,2.1S5.7,3.3,5.7,2.1C5.7,0.9,6.7,0,7.8,0z"/>
</g>
</svg>
Notice the transform="rotation(90 8 8)" attribute. It rotates the image by 90 degrees around the point [8,8]. The point should be the center of the image according to viewBox="0 0 16 16" but for some reason, the dimensions get broken, and an offset of 16 pixels is allocated on the left side of the image.
The simplest fix is to change the value of the transform attribute to rotation(90). The fixed image in base64 is:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHRyYW5zZm9ybT0icm90YXRlKDkwKSIgZmlsbD0iIzljOWM5YyI+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgoJCjwvc3ZnPg==
You have to increase the width of the container.
You can see it in this playground: https://codesandbox.io/s/admiring-monad-lwqlk?file=/index.html
I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that.
The child of that is a SVG file which I set the width to 200% of the container.
In chrome and firefox that works fine, I get a nice image like this:
The HTML looks like this:
<div class="kit-template ng-isolate-scope front">
<div class="svg-document ng-scope">
<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 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
<!-- Removed for brevity -->
</svg>
</div>
</div>
and the CSS/SASS looks like this:
.kit-template {
overflow: hidden;
position: relative;
height: 320px;
.svg-document {
width: 100%;
overflow: hidden;
margin: 0 auto;
/*position: absolute;
bottom: 0;*/
svg {
width: 200%;
path, polyline, polygon, rect {
cursor: pointer;
}
}
}
}
Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:
And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.
Does anyone know why this is happening and how I can fix it?
Update 1
I have created a very simple version on codepen so you can see the issue.
Here it is:
http://codepen.io/r3plica/pen/Kdypwe
View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.
What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.
Test codepen example in IE11:
http://codepen.io/jonathan/pen/MarvEm
<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">
Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version, xmlns, xmlns:xlink, x, and y, since those are not needed as well.
I was having SVG image display issue in IE11. The issue was inner svg image was having width and height mentioned. Due to this it was failing to scale properly on IE11 and it was working fine on IE edge, chrome, firefox very fine.
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
To fix the issue I removed width="120" height="120" and its working fine.
When I observed svg image was having width="120" height="120" viewBox="0 0 120 120" but in IE11 it was only showing width="120" height="120".
output was:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
I have a polymer web component that contains an element. This element has a SVG background-image attached to it via CSS (.example:before).The issue is that the SVG is not displaying. It works on a standard HTML page but not when inside a polymer element. I would normally avoid an SVG embedded in the CSS. However, we are using VideoJS (this is not optional) and styling controls (adding icons) that are created by the library with javascript.
Is there an issue with SVG's in CSS with Polymer/Shadow Dom?
Example below:
<polymer-element name="example-element">
<template>
<style>
.example :before {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#ffffff" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34.004px" height="36.871px" viewBox="0 0 34.004 36.871" enable-background="new 0 0 34.004 36.871" xml:space="preserve"><path d="M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 40%;
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="example"></div>
</template>
</polymer-element>
Any solutions, workarounds or alternative methods would be appreciated.
Thanks, Ewan
I would like to add a note that the SVG/CSS seems to be altered by the browser.
From (in the CSS):
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#000000" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34.004px" height="36.871px" viewBox="0 0 34.004 36.871" enable-background="new 0 0 34.004 36.871" xml:space="preserve"><path d="M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871"/></svg>');
To (output by the browser):
background-image: url('data:image/svg+xml;utf8,<svg version=1.1 fill=#000000 id=Layer_1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=34.004px height=36.871px viewBox=0 0 34.004 36.871 enable-background=new 0 0 34.004 36.871 xml:space=preserve><path d=M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871/></svg>');
The URL is invalid as a # character indicates the start of a fragment identifier. You need to encode # characters as %23.
You may find simply base64 encoding the entire URL is simpler and easier.
I wrestled with this problem for a long time and the problem ended up being that I needed to URL encode my quotes...
" -> %22
' -> %27
Notice how in your "To (output by the browser):" all of the quotes have been removed? For me it wouldn't work without the quotes, and then when I encoded them it magically started working again.
I want to use an svg image in 100% width which has as filled background from the top left to the bottom right. I've tried several ways to make it always 100% wide (background-size, etc.) but it doesn't work.
If I'm opening the svg source code, there are several "fix" widths. Maybe this is the problem. But I don't know how I could fix it.
It would be great if I could place this swg as a background of a div. (using css)
Here is my svg Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
width="1280px" height="70px" viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve">
<polygon points="1280,70 0,70 0,0 "/>
</svg>
Does anybody have an idea how to fix this? I also thought about another way, with an rotated div container. But I think svg is the best way.
Here you can see an example:
jsfiddle.net/maszzfom
Remove width and height
<svg 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 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve" preserveAspectRatio="none">
<polygon points="1280,70 0,70 0,0 "/>
</svg>
css
svg{width:100%}
resource on responsive svg
Demo
upate: save the svg as file and use it like this
.element {
background-image: url(image.svg);
/* other styles */
}
If you want a pure css solute the give pseudo element or linear-gradient a try
If the triangle doesn't have content by itself (just decoration), it should be defined in the CSS.
Following your example with a triangle ( 100% width and static height 70px), you could achieve it as:
.triangle {
position: relative;
}
.triangle:before {
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: -70px;
height: 70px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,100 0,100' style='fill:%23000000;' /%3E%3C/svg%3E");
}
<div class="triangle"></div>
The triangle coordinates are possible to invert: points='0,0 0,100 100,100'
You could change the triangle color: "fill:%23000000;"
The CSS works with :before and :after, depending your needs!
Fiddle: http://jsfiddle.net/b8czxyzg/
I'm using SVG's as icons in the following way
The SVG's are saved from in Illustrator CC
<div class="social">
<img src="img/icon_twitter.svg">
<img src="img/icon_facebook.svg">
</div>
This is the CSS. The social div is the wrapper of the 2 's
.social {
position: absolute;
left: 40px;
bottom: 40px;
}
.social img {
width: 50px;
margin-right: 10px;
}
Here are the screenshots with the results, The first one is normal ( chrome )
The other one's are weirdly stretched in the height.
Chrome
Internet Explorer 11
Safari
Here's the SVG code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 28.4 28.4" enable-background="new 0 0 28.4 28.4" xml:space="preserve">
<path fill="#FFFFFF" d="M14.2,0C6.4,0,0.1,6.3,0.1,14.1c0,7.8,6.3,14.1,14.1,14.1s14.1- 6.3,14.1-14.1C28.4,6.3,22,0,14.2,0z
M18,14.1h-2.4c0,3.9,0,8.7,0,8.7h-3.6c0,0,0-4.8,0-8.7h-1.7V11h1.7V9c0-1.4,0.7- 3.7,3.7-3.7l2.7,0v3c0,0-1.6,0-2,0
c-0.3,0-0.8,0.2-0.8,0.8V11h2.8L18,14.1z"/>
</svg>
Solution
In my CSS i only specified width: 50px; for the image element that holds the SVG.
I also had to specify a height: 50px; It's working now!
In your SVG remove the height and widthattr this will make it responsive
read more at MAKING SVGS RESPONSIVE WITH CSS
Solution
I also have to specify the height attribute in my CSS
In my css i was had
width: 50px;
But you also have to specify the height. It's not preserving the aspect from itself.
Thanks everyone!