0

I have 2 .svg's:

  1. map.svg - https://github.com/djaiss/mapsicon/blob/master/all/ad/vector.svg
  2. flag.svg- https://github.com/hjnilsson/country-flags/blob/master/svg/ad.svg

I want to inject the flag.svg as a background-image into the map.svg

What's the way to do it? Is there's an attribute for the svg or a sub element which is right for this kind of task?

Here's my snippet:

<svg xmlns="http://www.w3.org/2000/svg" width= '400' height='400' version="1" viewBox="0 0 1024 1024">
  <path d="M372 98.3c-5.8 3.5-14.9 8.7-20.3 11.6l-9.8 5.3-5.7-1.9c-5.5-1.9-6-1.9-13.4-.3-4.2 1-8.3 2-9.2 2.3-.8.3-3.6 4.4-6.2 9.1-2.6 4.7-5.3 8.6-5.8 8.6-.6 0-8.4.9-17.4 1.9l-16.3 1.9-9.5-2.9c-5.2-1.5-9.8-3-10.2-3.3-.4-.2-4.7-5.4-9.7-11.5-7-8.5-9.6-11-11.5-11-1.4-.1-10.4 1.1-20.1 2.6l-17.6 2.6-2.8 9.5c-2.3 8.1-2.6 10.6-2.1 17.1l.7 7.6-11.5 12-11.5 12-.1 10.2v10.1l3.8.9 3.7.9.6 7.9c.5 7 1.2 9.4 5.8 18.9 3.9 8 5.8 13.4 7.2 20.8 1 5.4 1.9 10.6 1.9 11.6s-3.3 3.9-8.5 7.2l-8.5 5.5v12l-9.8 2.8c-6.8 2-12.6 4.7-19.4 8.8l-9.8 5.8-6.7-2.8c-4.9-2.1-9.7-3.2-17.2-4-5.8-.5-10.8-.8-11.1-.6-.4.2-1 3.9-1.4 8.2-.3 4.3-1.1 12.8-1.7 19-1.3 12.6-.2 11.4-11.6 12.8l-5.2.7-6.7 10.4-6.6 10.5-5.2-.3-5.1-.3-.8 7.6-.9 7.5 6 12c4.1 8.2 8.1 14.3 12.7 19.6l6.6 7.6 7.2.7c13 1.1 12.3.7 15.2 9.6 1.5 4.3 2.5 8.3 2.3 8.9-.2.5-6.3 6-13.6 12.3-12.3 10.5-14.4 11.9-27 17.6-7.5 3.5-14.2 6.8-14.9 7.4-.6.7-6.1 13.4-12.2 28.3s-13.3 32-16.1 37.9c-2.8 6-4.9 11.4-4.7 11.9.3.6 1.6 1.8 3 2.5 2.5 1.3 3 1.1 12.1-6.3l9.5-7.6h7.7c7.1 0 9.4-.6 25.8-6.7 10-3.6 18.6-6.6 19.1-6.6.8 0 26.1 16.3 29.3 18.8.1.1-.2 3.2-.8 6.8-1 6.3-.9 6.8 3.4 18.8 2.4 6.8 4.7 13.2 5.1 14.1.5 1.2 2.3 2 5.5 2.4 2.6.3 5.3.9 5.9 1.3 1 .6 24.9 50.9 25.4 53.4.1.5-5 5-11.3 9.9-6.3 4.9-16.3 13.2-22.2 18.4-10.4 9.2-10.8 9.7-11.4 14.5-.4 2.7-1.2 5.5-1.8 6.3-.6.8-8 4.6-16.4 8.5L82.9 693l-19.7.1c-10.8 0-24.2.6-29.7 1.2l-10 1.2-5.7 8.5c-5.3 7.8-6.3 8.7-11.2 10.5-3 1.1-5.7 2.3-6 2.6-.5.5.3 3.4 2.9 10.7.3.9 2.1.6 7.1-1.3 3.6-1.4 7.2-2.5 8-2.5.7 0 2.1 2.5 3.1 5.6l1.7 5.6 8.6-.6c4.7-.3 13-.8 18.5-1.1l10-.6L75 747.4 89.5 762l-3.8 7.3-3.8 7.2 2.9 13.4 3 13.4 4.9 4.2c2.6 2.3 6.1 5.3 7.8 6.7l2.9 2.6-7.8 8.7-7.9 8.6 3.2 10.7c1.8 5.8 5.7 15.4 8.7 21.3l5.4 10.8-6.7-2.5c-3.7-1.4-7.2-2.8-7.7-3.2-2-1.2 3.6 5.6 12.1 14.6l8.8 9.3L131 898c18.4 2.8 20.9 3.5 45.6 12l26.2 9h43.3l22.5 6.6 22.6 6.6 16.1-5.8 16.2-5.7 28.5-1.8c15.7-1 30.8-1.8 33.6-1.8l5.1-.1.7-4.8c.3-2.6.9-10.6 1.3-17.9l.6-13.2 8.6-2.9c4.7-1.6 8.6-3.3 8.6-3.8s-.4-8.2-.9-17.1c-.8-16-.8-16.3 1.9-24.3 2.1-6.2 3.1-8.1 4.8-8.5 3-.7 16.8-3.5 17.1-3.5.2 0 4.3 5.2 9 11.5 7.7 10.3 9.3 11.8 14.2 14 8.7 3.8 8.2 4.1 12.8-6.8 3.2-7.6 6.3-12.6 13.6-22.1l9.4-12.3 13.6-7.7 13.5-7.8 9.1 4.7 9 4.8 17-1.7c20.8-2 23-2 37.6.1l11.8 1.6 5.7-5c3.2-2.7 6.3-5.2 7-5.6.6-.4 3.7.5 6.8 2l5.6 2.8 9.1-4.9 9-4.8 4.9 4.8 4.9 4.8 8.6-2.8 8.6-2.8 3.1-6.9c2.5-5.9 3.7-7.4 7.8-9.9 5.5-3.3 5.5-2.3.1-14l-2.9-6.6 1.9-4.8c1-2.6 3.4-12.1 5.3-21 4.9-23.5 5.8-27 6.6-28 .4-.4 17.2-2.6 37.4-4.7l36.6-3.9 15.4 11.6 15.5 11.6 3.7-3.3c2.1-1.8 11-10.1 19.8-18.5 8.8-8.3 20.8-19.1 26.7-23.9 8.6-7 11-9.4 11.8-12.4.5-2 1-11.2 1-20.5v-16.9l-4.5-5.5c-2.5-3-4.5-5.7-4.5-6.1 0-.4 2.5-1.5 5.5-2.5l5.5-1.7 6.9-13.7c6.5-13 6.9-14.4 8.6-26.1 1.8-11.9 1.8-12.6 0-19.6l-1.8-7.3 3.8-9.4 3.8-9.3-1.8-13.1-1.8-13.1 6.8-12.5c6.2-11.7 7.4-13.3 16.9-22 17.8-16.6 16.3-15.7 30.9-19.9l13.2-3.8 11.7 1 11.8 1.1 10.7-5.8c13.1-7 38.6-26.7 37.9-29.3-1.4-4.9-8.9-28.7-9.2-29.2-.2-.3-10.8 1.2-23.5 3.3l-23.2 3.9-17.1-5.7c-12.3-4.1-21.4-7.9-32.6-13.7-14.1-7.4-16.4-8.2-26-9.9-5.8-1-13.5-1.8-17.2-1.8-5.8 0-7.5-.4-11.8-3.1-4-2.5-4.9-3.5-4.5-5.2.3-1.2 1.6-9.1 3-17.5l2.5-15.3 6-8c4-5.3 6-9 6-10.9 0-2.1 1.1-3.6 4.7-6.4 2.6-2 7.3-6.7 10.5-10.5l5.9-7-3-5.8c-1.6-3.2-3.2-8.4-3.6-11.6-.4-3.1-1.1-5.7-1.5-5.7-.4 0-2.9 1.9-5.6 4.2-2.7 2.3-5.6 4.8-6.5 5.5-1.4 1.2-3.9 1.1-16.5-.6-8.1-1.2-18.3-2.1-22.5-2.1-6.4 0-9.6-.6-18.1-3.7-9.4-3.4-11.1-4.4-19.6-11.8-12.2-10.8-17.5-13-38-15.6l-15.4-2-10.2 6.1-10.2 6-10.5.1c-5.7 0-12.6.4-15.3.8-6.2 1-13.4-.5-19.8-4.3-4.4-2.6-4.7-3-5.4-8.2-.4-3.5-1.2-5.8-2.3-6.3-2.3-1.3-37.5-9.1-47.5-10.5l-8.1-1.2-9.9 4.9-9.9 4.9-7.7-1.1c-5.2-.7-8.9-.7-11.1 0-4.6 1.3-15.9.2-24.7-2.6-8.5-2.7-12.1-2.2-18.6 2.6-3.3 2.4-5 2.9-9.8 2.9H520l-6.6-13.3c-3.7-7.2-7.1-13.5-7.7-13.8-.5-.4-2.8-1-5.1-1.3-4.1-.7-34.6-7.3-37.8-8.2-1.6-.5-1.8-1.9-1.8-10.3v-9.8l-4.5-1.7c-2.4-1-4.6-2.5-4.9-3.4-.2-.9-.8-5.8-1.1-10.9l-.7-9.2-7.1-.3-7.1-.3-6.3-8.9c-3.4-4.8-6.4-9.1-6.7-9.3-.3-.3-4 .7-8.4 2.2l-7.8 2.8-11.5-8.6c-6.4-4.8-11.8-8.7-12-8.7-.2 0-5.1 2.8-10.9 6.3z"/>
 
 <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/6b/Flag_of_Norway%2C_state.svg" />
</svg>
ueeieiie
  • 1,412
  • 2
  • 15
  • 42
  • Maybe [this](https://stackoverflow.com/questions/5451135/embed-svg-in-svg) could help you. – rojadesign Mar 12 '18 at 09:41
  • Possible duplicate of [Embed SVG in SVG?](https://stackoverflow.com/questions/5451135/embed-svg-in-svg) – rojadesign Mar 12 '18 at 09:43
  • 1
    or https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image – Robert Longson Mar 12 '18 at 09:47
  • @RobertLongson The post you mentioned was giving a background to a path, and it was to complicated to understand how to I manage to mingle with my complex path and fill it with my second svg as a background – ueeieiie Mar 12 '18 at 09:50
  • 1
    You'll have to give us more than that. How are we supposed to know why you find it "complicated to understand"? You've not shown us either file's contents, nor how you tried to apply the answer in the question I linked and what the problem was with that attempt. – Robert Longson Mar 12 '18 at 09:52
  • 1
    @rojadesign you're right, thanks for the feedback. I updated the post with my 2 svg's, and a snippet my failing code – ueeieiie Mar 12 '18 at 10:08

1 Answers1

0

Use the image element and reference your SVG file.

<svg>
  <image href="flag.svg"/>
</svg>

then set the map.svg as the background image.

rojadesign
  • 385
  • 3
  • 14
kevinniel
  • 1,088
  • 1
  • 6
  • 14