image svg vector frontend vector-graphics

How to put one svg in another?

I'm trying to put one svg in another, but the display in the browser and in the code editor is different, and I can't figure out what the problem is.

This is how WebStorm displays the picture

And so the browser

How to fix this problem?

Here is the code I wrote.

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<g>
    <svg width="15" height="15" viewBox="-15 -20 20 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>

<defs>
    <filter id="filter0_dd" x="0.5" y="0" width="32" height="32" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
    </filter>
</defs>
</svg>

Solution

The rendering in WebStorm is wrong.

There are three problems with your SVG:

the child <svg> is not positioned in the right place
the viewBox attribute only covers a portion of your symbol. So part of your child SVG (the symbol) is not visible. That's because:
the default value of overflow property is "hidden" for child <svg> elements. So the contents will be clipped to the region described by the width and height.

In the following snippet, I've marked the boundary of the child <svg> with a green rectangle.

body > svg {
  width: 400px;
  height: 100%;
}

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<rect x="0" y="0" width="15" height="15" fill="none" stroke="green" stroke-width="0.2"/>
<g>
    <svg width="15" height="15" viewBox="-15 -20 20 30" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>
</svg>

One way to fix it is to add overflow="visible" to the child <svg> element.

body > svg {
  width: 400px;
  height: 100%;
}

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<g>
    <svg width="15" height="15" viewBox="-15 -20 20 30" fill="none" overflow="visible">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>

<defs>
    <filter id="filter0_dd" x="0.5" y="0" width="32" height="32" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
    </filter>
</defs>
</svg>

However the more ideal solution would be to fix the issues with the viewBox, size, and position of the child <svg> element.

body > svg {
  width: 400px;
  height: 100%;
}

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<g>
    <svg x="10" y="10" width="12.5" height="12.5" viewBox="0 0 25 25" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>

<defs>
    <filter id="filter0_dd" x="0.5" y="0" width="32" height="32" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
    </filter>
</defs>
</svg>