ajmajmajma ajmajmajma - 1 year ago 88
CSS Question

css/svg create larger background image

I am trying to replace an existing libraries background image with a slightly larger version. For reference, it is just a little drag handle in the corner of a "draggable" item. Upon inspection, I see the original dev is just setting a little background-image like so:

position: absolute;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=) bottom right no-repeat;
background-origin: content-box;

I am wondering how the
was generated and if it is possible to make my own with just a slightly larger handle. I have access to tools like photoshop/illustrator but I am thinking maybe that is overkill. I want to make the little grey handle maybe 5px larger in each direction. Unsure where to start with this, any advice is welcome. Thanks!

Edit - here it is in a codepen http://codepen.io/ajmajma/pen/NAmPQx

Answer Source

The original developer used a clever technique called data URI to avoid an unnecessary request for an image resource*. This is done by using the syntax: data(mime-type;base64,base64-string).

Open a developer tools' console in your browser and run the following code (the base64 string is from your example):


The result is how the browser sees this image:

<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
    x="0px" y="0px" width="6px" height="6px"
    <g opacity="0.302">
        <path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/>

You can edit the SVG code as you wish in any visual editor or just textually and then run in the browser's console btoa('updated-svg-code') on it. Wrap the resulting string with data:image/svg+xml;base64,%UPDATED% and use it as a background image.

For more information about atob and btoa JavaScript functions for base64-manipulation, see an article at MDN.

* - note that the price for avoiding an extra request is an increase by 33% of the CSS file size. This is usually mitigated by the usage of GZIP compression, though.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download