Base64 Character length

HTML & CSS
1

What’s safe to use,

And what would be problematic if I went beyond that number?

2

Easily found under “Length limitations” which is under “Common problems”

* hint, once you get in the habit of finding and reading documentation, many of your questions will be answered.

4 Likes
3

Length limitations
Although Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type).

4

Then I’m safe putting this into the CSS.
I originally had it in the html, then moved it to the CSS.

  .playd {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==');
  }
  
  .paused {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');
  }
5

If the length gets near limits you could try not using base64 to save a fourth.

1 Like
6

Wait a second, I was just reading this:

The xmlns=“http://www.w3.org/2000/svg” attribute is:

Required for image/svg+xml files. 1
Optional for inlined <svg>. 2

The xmlns:xlink=“http://www.w3.org/1999/xlink” attribute is:

Required for image/svg+xml files with xlink: attributes. 1
Optional for inlined <svg> with xlink: attributes. 2

The version=“1.1” attribute is:

Recommended to comply with image/svg+xml files standards. 3
Apparently ignored by every user agent. 4
7

I can’t put this into the CSS then?
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov

How would I add this:
xmlns="http://www.w3.org/2000/svg"

To

    <div class="playd" width="38px" height="38px" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==');background-position: 58% 50%;">
    </div>

I got it:

  <div class="playd" xmlns="http://www.w3.org/2000/svg" width="38px" height="38px" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==');background-position: 58% 50%;">
    </div>
8

When looking at how spotify has it set up, using base64,

They don’t use this:
xmlns="http://www.w3.org/2000/svg"

911×403 39.5 KB

9

The “xmlns” is XML NameSpace.

10

I was just reading this:

xmlns="http://www.w3.org/2000/svg"
This is required for external files, however if your SVG code is inline with your HTML, it is safe to remove it.

What does external files mean?

Anything other than, html, or CSS?

The only required attributes on the SVG element are the xmlns type (if the SVG is not inline) and the viewbox, which controls the dimensions of the SVG’s artboard.
https://raygun.com/blog/improve-page-load-speed-svg-optimization/

11

And in the example that they give,
xmlns="http://www.w3.org/2000/svg"

Is included:

After removing all the unnecessary attributes, groups, comments and XML, I have managed to reduce the file size by over 50%, reducing the 609 bytes file down to just 300 bytes.

Isn’t this considered inline SVG?

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style type="text/css">
.st0{stroke:#0000FF;stroke-width:20;stroke-miterlimit:10;}
.st1{fill:#FF0000;}
</style>
<rect x="20" y="20" class="st0" width="160" height="160"/>
<circle class="st1" cx="100" cy="100" r="26"/>
</svg>
12

You can safely remove the xmlns attribute if you’re supporting only HTML5-compliant browsers
https://css-tricks.com/understanding-and-manually-improving-svg-optimization/

13

Copy

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style type="text/css">
.st0{stroke:#0000FF;stroke-width:20;stroke-miterlimit:10;}
.st1{fill:#FF0000;}
</style>
<rect x="20" y="20" class="st0" width="160" height="160"/>
<circle class="st1" cx="100" cy="100" r="26"/>
</svg>

into a new file in your text editor and save it as test.svg in the same folder as your web page file.

Then as an <img> src or a CSS background image use “test.svg”

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.