Criando um circuito elétrico em um arquivo SVG

Aqui está um exemplo de código para gerar um arquivo SVG com um circuito elétrico simples, contendo uma fonte de energia, uma LED e um resistor:

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="3" fill="none"/>
  <path d="M150 100 L200 100 L250 150" stroke="black" stroke-width="3" fill="none"/>
  <circle cx="250" cy="150" r="5" stroke="black" stroke-width="3" fill="black"/>
  <rect x="150" y="150" width="100" height="50" stroke="black" stroke-width="3" fill="none"/>
  <path d="M175 175 L175 200 L225 200 L225 175" stroke="black" stroke-width="3" fill="none"/>
  <path d="M175 185 L175 190 L180 190 L180 185 L175 185" stroke="black" stroke-width="1" fill="none"/>
  <path d="M220 185 L220 190 L225 190 L225 185 L220 185" stroke="black" stroke-width="1" fill="none"/>
</svg>

Aqui está uma breve explicação do código:

  • <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">: Abre o elemento SVG e define a largura e altura da área de desenho como 500×300 pixels.
  • <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="3" fill="none"/>: Desenha um retângulo para representar a fonte de energia. O retângulo tem largura e altura de 100 pixels e começa a partir das coordenadas (50,50) na área de desenho. O stroke define a cor da borda e o stroke-width define a largura da borda, enquanto o fill é definido como “none” para que o retângulo fique sem preenchimento.
  • <path d="M150 100 L200 100 L250 150" stroke="black" stroke-width="3" fill="none"/>: Desenha uma linha para representar o fio que conecta a fonte de energia ao resistor. A linha começa em (150,100) e termina em (250,150). O comando “M” significa “move to” (mover para), enquanto o “L” significa “line to” (linha para).
  • <circle cx="250" cy="150" r="5" stroke="black" stroke-width="3" fill="black"/>: Desenha um círculo para representar a LED. O centro do círculo é definido como (250,150) e o raio é definido como 5 pixels. O stroke define a cor da borda e o fill define a cor de preenchimento.
  • <rect x="150" y="150" width="100" height="50" stroke="black" stroke-width="3" fill="none"/>: Desenha um retângulo para representar o resistor. O retângulo tem largura de 100 pixels e altura de 50 pixels e começa a partir das coordenadas (150,150) na área de desenho. O stroke define a cor da borda e o stroke-width define a largura da borda, enquanto o fill é definido como “none” para que o retângulo fique sem preenchimento.
  • <path d="M175 175 L175 200 L225 200 L225 175" stroke="black" stroke-width="3" fill="none"/>: Desenha uma linha para representar o fio que conecta o resistor à LED. A linha começa em (175,175) e termina em (225,175). O comando “M” significa “move to” (mover para), enquanto o “L” significa “line to” (linha para).
  • <path d="M175 185 L175 190 L180 190 L180 185 L175 185" stroke="black" stroke-width="1" fill="none"/>: Desenha uma linha para representar a ligação do resistor com a fonte de energia. O comando “M” significa “move to” (mover para), enquanto o “L” significa “line to” (linha para).
  • <path d="M220 185 L220 190 L225 190 L225 185 L220 185" stroke="black" stroke-width="1" fill="none"/>: Desenha uma linha para representar a ligação do resistor com a LED. O comando “M” significa “move to” (mover para), enquanto o “L” significa “line to” (linha para).
  • Este código cria um circuito elétrico simples com uma fonte de energia, uma LED e um resistor. Você pode personalizar o tamanho e as cores dos elementos conforme necessário, e até mesmo adicionar mais componentes para criar um circuito mais complexo. Salve o código em um arquivo com a extensão “.svg” e abra-o em qualquer navegador da web moderno para ver o resultado final.