data-uri

How to get a rotated linear gradient svg for use as a background image?

by

To rotate the gradient you can e.g use the ‘gradientTransform’ attribute, like this: <?xml version=”1.0″ ?> <svg xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”100%” viewBox=”0 0 1 1″ preserveAspectRatio=”none”> <linearGradient id=”grad-ucgg-generated” gradientUnits=”userSpaceOnUse” x1=”0%” y1=”0%” x2=”100%” y2=”0%” gradientTransform=”rotate(65)”> <stop offset=”0%” stop-color=”#ffffff” stop-opacity=”0″/> <stop offset=”100%” stop-color=”#ff0000″ stop-opacity=”1″/> </linearGradient> <rect x=”0″ y=”0″ width=”1″ height=”1″ fill=”url(#grad-ucgg-generated)” /> </svg>

Convert HTML to data:text/html link using JavaScript

by

Characteristics of a data-URI A data-URI with MIME-type text/html has to be in one of these formats: data:text/html,<HTML HERE> data:text/html;charset=UTF-8,<HTML HERE> Base-64 encoding is not necessary. If your code contains non-ASCII characters, such as éé, charset=UTF-8 has to be added. The following characters have to be escaped: # – Firefox and Opera interpret this character … Read more

Compressing base64 data uri images

by

Maybe string compression is the solution for you. This converts the data to byte arrays. There are multiple implementations and algorithms around, for instance LZMA-JS A standalone JavaScript implementation of the Lempel-Ziv-Markov chain (LZMA) compression algorithm. my_lzma = new LZMA(“./lzma_worker.js”); my_lzma.compress(“This is my compression test.”, 1, function on_compress_complete(result) { console.log(“Compressed: ” + result); my_lzma.decompress(result, function … Read more

Why use data URI scheme?

by

According to Wikipedia: Advantages: HTTP request and header traffic is not required for embedded data, so data URIs consume less bandwidth whenever the overhead of encoding the inline content as a data URI is smaller than the HTTP overhead. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, … Read more

PHP Data-URI to file

by

A quick look at the PHP manual yields the following: If you want to save data that is derived from a Javascript canvas.toDataURL() function, you have to convert blanks into plusses. If you do not do that, the decoded data is corrupted: $encodedData = str_replace(‘ ‘,’+’,$encodedData); $decodedData = base64_decode($encodedData);

How do you base-64 encode a PNG image for use in a data-uri in a CSS file?

by

This should do it in Python: import base64 binary_fc = open(filepath, ‘rb’).read() # fc aka file_content base64_utf8_str = base64.b64encode(binary_fc).decode(‘utf-8’) ext = filepath.split(‘.’)[-1] dataurl = f’data:image/{ext};base64,{base64_utf8_str}’ Thanks to @cnst comment, we need the prefix data:image/{ext};base64, Thanks to @ramazanpolat answer, we need the decode(‘utf-8’)