Eu tenho um código svg que eu coloco no html porém eu quero mexer as coordenadas de cada item porém sempre que eu tento eu distorço tudo, como eu poderia fazer isso de forma que eu entenda oque faço
<g class="fullscreen-button-corner-0">
<path class="svg-fill" d="M8,16 10,16 10,12 14,12 14,10 8,10 8,16 Z"></path>
</g>
<g class="fullscreen-button-corner-1">
<path class="svg-fill" d="M18,10 18,12 22,12 22,16 24,16 24,10 18,10 Z"></path>
</g>
<g class="fullscreen-button-corner-2">
<path class="svg-fill" d="M22,24 18,24 18,26 24,26 24,20 22,20 22,24 Z"></path>
</g>
<g class="fullscreen-button-corner-3">
<path class="svg-fill" d="M10,20 8,20 8,26 14,26 14,24 10,24 10,20 Z"></path>
</g>
Parece meio óbvio o que vou dizer, mas pra entender o que está fazendo, a melhor forma é… entender o que são esses números.
Um bom ponto de partida é a documentação.
De forma resumida, o M indica que vc vai mover o ponto atual para as coordenadas indicadas. Depois, cada par de números é a próxima coordenada, e ele vai desenhando uma linha entre as coordenadas.
Por exemplo, M8,16 10,16 10,12 diz para começar na coordenada 8,12, depois desenha uma linha até a 10,16, depois outra linha desta para 10,12 e assim por diante. O Z encerra o caminho (e desenha uma linha até a primeira coordenada).
E para um entendimento completo, sugiro um tutorial de SVG. Não tem jeito, pra entender o que faz precisa saber em detalhes. Demora, mas é mais garantido que ficar mudando os números aleatoriamente 
4 curtidas