Ist this a way to hide picture paths to users?
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjZGEwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMzcxNDVjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
This is a base64 encoding of an svg image. There's another StackOverflow answer that explains it in a little detail.
This is actually the svg file in base64. This way you can have pictures or other files in your website without actually uploading them to your webspace.
base64 encoding for images. Using image without placing it anywhere.
Here is how you get this type of code for your image : Base 64 Image Maker
Related
I have a GatsbyJS website that uses NetlifyCMS. I restyled the images on my website to be centered. The issue i've found now is that all the emojis in the blog posts are now also in a new line and centered in the posts and it doesn't look good at all.
Is there anyway to style the img and emojis seperately? I am aware that emojis show up on the markdown file as images.
I have attached images of how the emojis look in the blog posts, the markdown file and the styling file.
Any solutions would be appreciated <3
That's because you are using images.
In markdown the syntax
![x](y)
will be rendered to html as
<img src='y' alt='x'>
So, the solution is either using plain emoji as #ando-andriamalala suggested.
Or, if you really need to use image (I'm guessing for display consistency?), you can, assuming you only use this domain for your emoji needs:
.Content img[src*="https://static.xx.fbcdn.net"] {
...
}
see MDN CSS: Attribute selectors for details
Try to use copy and past emoji instead of image 😆
here a link https://getemoji.com/
I'm trying to use as css content and image (base64), but when I load the page is loaded like a broken link image.
Now, i'm using a website to download the base64 image and this is the css that i'm using that gives me the broken images:
.default:after{
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg0K1422f94715e8d9b67004ad32568deab3');
position:absolute;
width:100px;
height:100px;
}
if i open the "broken" base 64 image into a new chrome tab, this is the resulting error:
This page contains the following errors:
error on line 10 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error.
now, i've never used base64 images, but i have to do something special or it should be just copy and paste the autogenerated code?
thanks in advance for the help
**PS: i'm developing in localhost, i don't know if it could be the cause or not.
You can easily convert a SVG file to a base64 ecoded value for CSS background attribute with this simple bash command:
echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"
Tested on Mac OS X.
This way you also avoid the URL escaping mess.
Remember that base64 encoding an SVG file increase its size, see css-tricks.com blog post
It is what it says, you've encoded the document + some additional garbage at the end.
This would seem to be the correct encoding which I obtained by decoding via http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/ removing the garbage and then encoding using the same site.
PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTgsMEMzLjU4MiwwLDAsMy41ODIsMCw4czMuNTgyLDgsOCw4czgtMy41ODIsOC04UzEyLjQxOCwwLDgsMHogTTksMTJjMCwwLjU1Mi0wLjQ0OCwxLTEsMXMtMS0wLjQ0OC0xLTFWNw0KCWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxVjEyeiBNOCw1LjAxNmMtMC41NTIsMC0xLTAuNDQ4LTEtMWMwLTAuNTUyLDAuNDQ4LTEsMS0xczEsMC40NDgsMSwxQzksNC41NjgsOC41NTIsNS4wMTYsOCw1LjAxNnoNCgkiLz4NCjwvc3ZnPg==
In php,Is it possible to convert the whole html content to IMAGE(PNG).I tried out with gd library the image is created but image shows white screen.Can any one help me to solve this issue.
I recommend
https://github.com/KnpLabs/KnpSnappyBundle
as this can export html content to an image file.
great documentation can also provided
At the moment I am using .png images for my icons. I want to convert them to font-icons and use them instead. What I am doing is converting the images to SVG and then importing them in Icomoon, but all I get are blank fields. What am I doing wrong? Are there any requirements that I am missing?
I had the same problem and it is the paths in style.css file you got from Icomoon, correct them and it will be okay.
I'm trying to create a little HTML5 mobile game. To avoid any problems with screenresolution I'm using .svg as backgroundimages. While working on the local server the images don't get displayed on the final server: http://tangera.bemoredifferent.com/. It would be great if anybody has a solution for this problem.
Daniel
If you like to use .svg file as background, you must add below code in your stylesheet
background-size: cover;
Reason why, see the documentation https://developer.mozilla.org/en-US/docs/CSS/background-size
Demo here: http://jsfiddle.net/robertc/c9LgV/
Good Luck !