Passo 5

Instruções

Você está chegando mais perto, agora veja este exemplo:

<svg viewBox="0 0 50 50">
</svg>

O atributo viewBox controla qual parte da imagem está visível dentro do SVG.

Os dois primeiros números (0 0) definem a posição inicial do viewBox — o canto superior esquerdo (x e y).
Os próximos dois números (50 50) definem a largura e a altura do viewBox.

Defina o atributo viewBox para 0 0 24 24.

O que fazer:

Testes:

Você deve ter um atributo `viewBox`.
Você deve definir a posição x do `viewBox` para 0.
Você deve definir a posição y do `viewBox` para 0.
Você deve definir a largura do `viewBox` para 24.
Você deve definir a altura do `viewBox` para 24.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Heart Icon</title>
  </head>
  <body>
    
    <svg width="24" height="24">
    
      <path
        d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
      ></path>
    </svg>
  </body>
</html>

Preview