SVG file as background-image data image SVG+XML

[toplisek]

I try to set radio button or maybe checkbox using SVG XML file.
background-image: url(data:image/svg+xml… should be placed. How to transform downloaded SVG into background-image: url(…
and data:image/svg+xml as this is not pure SVG file and custom made SVG design.

[PaulOB]

I think you’ll need to provide some more detail in the form of the html and css you are using and also attach the image you are using so we can see what’s what

[coothead]

Hi there toplisek,

further to what @PaulOB has requested,
why do you need to use data:image/svg+xml?

You could just use …

background-image: url( filename.svg );

coothead

[toplisek]

Please find the whole code. I try to replicate SVG image using file and line /*background-image: url(152185.svg), linear-gradient(to bottom, #11D314, #9BD316); */.
Source code: https://codepen.io/ngc-yn

<form>
  <input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
  <label for="fruit1">Apple</label>
  <input type="checkbox" id="fruit2" name="fruit-2" value="Banana" disabled>
  <label for="fruit2">Banana</label>
  <input type="checkbox" id="fruit3" name="fruit-3" value="Cherry" checked disabled>
  <label for="fruit3">Cherry</label>
  <input type="checkbox" id="fruit4" name="fruit-4" value="Strawberry">
  <label for="fruit4">Strawberry</label>
</form>

and CSS:

input[type=checkbox] + label {
 display: block;
 margin: 0.2em;
 cursor: pointer;
 padding: 0.2em;
}
input[type=checkbox] {
 display: none;
}
input[type=checkbox] + label:before {
 content: "\2714";
 /*background-image: url(152185.svg), linear-gradient(to bottom, #11D314, #9BD316); */
 border: 0.1em solid #000;
 border-radius: 0.2em;
 display: inline-block;
 width: 1em;
 height: 1em;
 padding-left: 0.2em;
 padding-bottom: 0.3em;
 margin-right: 0.2em;
 vertical-align: bottom;
 color: transparent;
 transition: .2s;
}
input[type=checkbox] + label:active:before {
 transform: scale(0);
}
input[type=checkbox]:checked + label:before {
 background-color: MediumSeaGreen;
 border-color: MediumSeaGreen;
 color: #fff;
}
input[type=checkbox]:disabled + label:before {
 transform: scale(1);
 border-color: #aaa;
}
input[type=checkbox]:checked:disabled + label:before {
 transform: scale(1);
 background-color: #bfb;
 border-color: #bfb;
}

SVG is just an example: https://svgsilh.com/image/152185.html

[PaulOB]

@toplisek

background-image: url(152185.svg), linear-gradient(to bottom, #11D314, #9BD316); */

Set the background-size to contain.

e.g.

input[type=checkbox]:checked + label:before {
    background-image: url( https://svgsilh.com/svg/152185.svg), linear-gradient(to bottom, #11D314, #9BD316);
  background-size:contain;
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

[toplisek]

I have tested and it works

input[type=checkbox] + label:before {
 content: "\2714";
 border: 0.1em solid #000;
 border-radius: 0.2em;
 display: inline-block;
 width: 1em;
 height: 1em;
 padding-left: 0.2em;
 padding-bottom: 0.3em;
 margin-right: 0.2em;
 vertical-align: bottom;
 color: transparent;
 transition: .2s;
}

but your code is not a checkbox. Maybe I missed.

[PaulOB]

@toplisek

but your code is not a checkbox. Maybe I missed

Sorry you lost me?

You asked about placing an Svg image as a background which I answered.

What is it that you now require?

[toplisek]

I try to make unchecked and checked checkbox. When I test your code it will not be shown image. I will test further what is an issue. Thank you for the suggestions.

[PaulOB]

@toplisek

When I test your code it will not be shown image.

You already told me it worked in your post above so I’m a little confused?

The image you linked to is a checked image so you need to have an unchecked image for the default state.

Or just draw an empty box but it won’t match the images outline.

input[type="checkbox"] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label:before {
  content: "";
  border: 2px solid #000;
  border-radius: 4px;
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: 0.2s;
  box-sizing: border-box;
}
input[type="checkbox"]:checked + label:before {
  background-image: url(https://svgsilh.com/svg/152185.svg);
  background-size: contain;
  border: none;
  transform: scale(1.2) translateY(-.1rem);
}

What you need is to set the default unchecked image into the input[type="checkbox"] + label:before code and remove the borders.