Is there a way to fill image within SVG using CSS?

Just like how CSS styles like fill, stroke being set via CSS, is there a way to set image (background-image) to an SVG element using CSS alone?
Some existing solutions have <image> tag within the <svg> element, but I don't want to have that since I'm using a third-party library that generates the SVG, so CSS seems to be a good alternative.

Update:
I would like to add a background to a specific svg element, not the whole SVG. Didn't realize that it wasn't mentioned in the actual question earlier.

edited Nov 21 '18 at 3:41

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

svg{background:url("whatever.jpg");}

– enxaneta
Nov 20 '18 at 15:19

@paul-lebeau I don't think its a duplicate. This question is completely different from those.

– Arvind Chinniah
Nov 22 '18 at 10:04

Sorry. Reopened. I missed the "using CSS alone" bit.

– Paul LeBeau
Nov 22 '18 at 10:20

add a comment |

Update:
I would like to add a background to a specific svg element, not the whole SVG. Didn't realize that it wasn't mentioned in the actual question earlier.

edited Nov 21 '18 at 3:41

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

svg{background:url("whatever.jpg");}

– enxaneta
Nov 20 '18 at 15:19

@paul-lebeau I don't think its a duplicate. This question is completely different from those.

– Arvind Chinniah
Nov 22 '18 at 10:04

Sorry. Reopened. I missed the "using CSS alone" bit.

– Paul LeBeau
Nov 22 '18 at 10:20

add a comment |

Update:
I would like to add a background to a specific svg element, not the whole SVG. Didn't realize that it wasn't mentioned in the actual question earlier.

edited Nov 21 '18 at 3:41

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

Update:
I would like to add a background to a specific svg element, not the whole SVG. Didn't realize that it wasn't mentioned in the actual question earlier.

html css svg

edited Nov 21 '18 at 3:41

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

edited Nov 21 '18 at 3:41

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

edited Nov 21 '18 at 3:41

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

asked Nov 20 '18 at 15:07

Arvind Chinniah

134

svg{background:url("whatever.jpg");}

– enxaneta
Nov 20 '18 at 15:19

@paul-lebeau I don't think its a duplicate. This question is completely different from those.

– Arvind Chinniah
Nov 22 '18 at 10:04

Sorry. Reopened. I missed the "using CSS alone" bit.

– Paul LeBeau
Nov 22 '18 at 10:20

add a comment |

svg{background:url("whatever.jpg");}

– enxaneta
Nov 20 '18 at 15:19

@paul-lebeau I don't think its a duplicate. This question is completely different from those.

– Arvind Chinniah
Nov 22 '18 at 10:04

Sorry. Reopened. I missed the "using CSS alone" bit.

– Paul LeBeau
Nov 22 '18 at 10:20

svg{background:url("whatever.jpg");}

– enxaneta
Nov 20 '18 at 15:19

@paul-lebeau I don't think its a duplicate. This question is completely different from those.

– Arvind Chinniah
Nov 22 '18 at 10:04

Sorry. Reopened. I missed the "using CSS alone" bit.

– Paul LeBeau
Nov 22 '18 at 10:20

add a comment |

2 Answers
2

active

oldest

votes

I think the only way you can do what you want is to define your pattern fills in a separate SVG. Then you can assign those predefined patterns via CSS.

Demo:

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

add a comment |

Just add it via CSS. Run the snippet to see it work:

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

answered Nov 20 '18 at 18:29

Ted

11.3k12045

I've updated the question, did not realize that I missed the SVG element there. Thanks for your answer though.

– Arvind Chinniah
Nov 21 '18 at 3:41

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395927%2fis-there-a-way-to-fill-image-within-svg-using-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I think the only way you can do what you want is to define your pattern fills in a separate SVG. Then you can assign those predefined patterns via CSS.

Demo:

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

add a comment |

I think the only way you can do what you want is to define your pattern fills in a separate SVG. Then you can assign those predefined patterns via CSS.

Demo:

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

add a comment |

I think the only way you can do what you want is to define your pattern fills in a separate SVG. Then you can assign those predefined patterns via CSS.

Demo:

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

I think the only way you can do what you want is to define your pattern fills in a separate SVG. Then you can assign those predefined patterns via CSS.

Demo:

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

.filled {

  fill: url(#image-fill);

}

<svg width="0" height="0">



  <!-- image fills defined here in this hidden SVG -->

  <defs>

    <pattern id="image-fill"

             patternContentUnits="objectBoundingBox" width="1" height="1">

      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"

             xlink:href="https://placekitten.com/400/400"/>

    </pattern>

  </defs>



</svg>







<svg viewBox="0 0 500 500">

  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>

</svg>

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

answered Nov 22 '18 at 10:36

Paul LeBeau

56.6k56795

add a comment |

Just add it via CSS. Run the snippet to see it work:

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

answered Nov 20 '18 at 18:29

Ted

11.3k12045

I've updated the question, did not realize that I missed the SVG element there. Thanks for your answer though.

– Arvind Chinniah
Nov 21 '18 at 3:41

add a comment |

Just add it via CSS. Run the snippet to see it work:

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

answered Nov 20 '18 at 18:29

Ted

11.3k12045

I've updated the question, did not realize that I missed the SVG element there. Thanks for your answer though.

– Arvind Chinniah
Nov 21 '18 at 3:41

add a comment |

Just add it via CSS. Run the snippet to see it work:

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

answered Nov 20 '18 at 18:29

Ted

11.3k12045

Just add it via CSS. Run the snippet to see it work:

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

svg{

  background: url("https://www.fillmurray.com/79/79");

}

<svg width="400" height="160" viewBox="0 0 400 160">

  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>

</svg>

answered Nov 20 '18 at 18:29

Ted

11.3k12045

answered Nov 20 '18 at 18:29

Ted

11.3k12045

answered Nov 20 '18 at 18:29

Ted

11.3k12045

answered Nov 20 '18 at 18:29

Ted

11.3k12045

I've updated the question, did not realize that I missed the SVG element there. Thanks for your answer though.

– Arvind Chinniah
Nov 21 '18 at 3:41

add a comment |

I've updated the question, did not realize that I missed the SVG element there. Thanks for your answer though.

– Arvind Chinniah
Nov 21 '18 at 3:41

I've updated the question, did not realize that I missed the SVG element there. Thanks for your answer though.

– Arvind Chinniah
Nov 21 '18 at 3:41

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu