PerfectVector
Por Irene Kim

Linhas de vinco e corte SVG: entenda a geometria

Leia a geometria da dobra SVG antes de definir Score ou Cut. Compare caminhos abertos, faixas preenchidas e tracejados e confira o fluxo documentado da Cricut.

9 min de leitura
Nesta página

Uma linha de vinco e uma linha de corte descrevem trabalhos pretendidos diferentes. No cartão dobrado daqui, o vinco marca a dobra e o corte marca o perímetro externo do cartão. Em um arquivo SVG, porém, uma linha colorida continua sendo geometria com aparência pintada. Sua cor, nome ou aspecto tracejado não estabelece a operação que o software de corte usará.

Leia três coisas separadamente: a rota armazenada no arquivo, a forma como é desenhada na tela e a operação atribuída após importar. A documentação de Operation da Cricut trata Cut e Score como instruções de máquina escolhidas para camadas do design. Uma prévia SVG que parece adequada não verifica essa seleção.

A rota da dobra e sua aparência são informações diferentes

SVG significa Scalable Vector Graphics. Um caminho armazena uma rota ou limite usando comandos como mover, linha e fechar. Um traço pinta ao longo dessa geometria; um preenchimento pinta o interior de uma forma. A especificação de caminhos SVG descreve comandos e subcaminhos desconectados.

Para um cartão simples, mantenha o perímetro externo, a dobra desejada e a arte decorativa identificáveis como objetos separados. Isso permite inspecionar a dobra sem confundi-la com a borda do cartão ou uma faixa decorativa.

Nosso exemplo original tem um cartão retangular, um pequeno motivo circular e uma posição vertical de dobra. Criamos quatro versões da geometria da dobra. O cartão e a decoração ficam iguais em todos os arquivos.

Representação da dobraO que a origem contémO que a imagem sozinha não comprova
Caminho aberto contínuoUma rota com dois extremosSe o destino fará vinco, desenho ou corte
Faixa estreita preenchidaUma forma fechada com larguraSe essa forma é a rota de dobra pretendida
Traço tracejado em um caminhoUma rota contínua com pintura tracejadaSe os espaços visíveis existem na geometria
Caminhos curtos separadosRotas desconectadas com seus próprios extremosQual operação usará esses segmentos

Essa é uma escolha de construção da dobra, não uma regra de que todo caminho aberto seja vinco ou todo caminho fechado seja corte. A interpretação do destino e a operação selecionada ainda precisam de conferência.

Duas marcas contínuas iguais podem conter rotas diferentes

O primeiro cartão usa este caminho aberto como referência de dobra:

<path id="fold" d="M50 18 V62" fill="none"
      stroke="#76548B" stroke-width="1.6"
      stroke-linecap="butt" />

Ele começa em 50, 18 e continua verticalmente até 50, 62. Não há comando de fechamento. A largura roxa vem da pintura do traço ao redor dessa rota.

O segundo cartão usa uma faixa preenchida:

<path id="fold" d="M49.2 18 H50.8 V62 H49.2 Z"
      fill="#76548B" stroke="none" />

Seu caminho percorre a faixa e Z o fecha. A definição de closepath do SVG explica essa conexão de fechamento. Esse arquivo armazena um perímetro ao redor da marca roxa em vez de uma única rota pelo meio.

Fizemos deliberadamente as duas marcas parecerem iguais. Uma camada chamada fold identifica o elemento para nossa inspeção, mas não registra uma operação de vinco testada. Antes de tratar um objeto importado como uma única rota de dobra, inspecione o que o destino realmente preservou.

Renderizações reais no navegador de quatro SVGs de cartões dobrados: caminho aberto de dobra, faixa fechada preenchida, caminho pintado com tracejado e sete segmentos abertos separados
Arquivos SVG originais criados diretamente. Cada par tem a mesma aparência e geometria armazenada diferente. Isso é evidência de origem e renderização, não uma importação na Cricut ou um teste físico de vinco.

A pintura tracejada não decide entre vinco e corte

O terceiro cartão mantém exatamente os dados d="M50 18 V62" do primeiro e adiciona stroke-dasharray="4 3". A especificação de pintura SVG define o padrão de tracejado como partes pintadas e não pintadas do traço. A rota deste exemplo continua contínua através dos espaços exibidos.

O quarto cartão contém sete caminhos abertos separados. Cada traço visível tem início e fim próprios. Não há geometria de dobra conectando os espaços. São arquivos de origem diferentes mesmo com marcas tracejadas iguais na tela.

Para um cartão, decida o que você pretendia: uma referência contínua de dobra, segmentos desconectados, uma guia impressa ou uma faixa decorativa. A aparência tracejada sozinha não responde a essa questão de design. Nosso guia de geometria de caminhos tracejados aborda lacunas armazenadas e tracejados convertidos em contornos com mais detalhes; este artigo se concentra em identificar a dobra e atribuir a operação pretendida.

O padrão 4 3 e a largura visível do traço foram escolhidos para deixar a demonstração legível. Não são pressão de vinco, ajustes de lâmina ou dimensões recomendadas de perfuração.

O que verificamos nos arquivos originais

Inspecionamos apenas o grupo da dobra ao contar caminhos, excluindo o perímetro e a decoração comuns do cartão:

  • A dobra contínua tem um caminho aberto e um subcaminho.
  • A faixa tem um caminho fechado e um subcaminho.
  • A dobra pintada com tracejado tem um caminho aberto com os dados de caminho iguais.
  • A versão de traços separados tem sete caminhos abertos e sete subcaminhos.

Também renderizamos os quatro SVGs salvos em 1000 × 800 pixels usando Sharp 0.34.4 e librsvg 2.61.1. A dobra contínua e a faixa preenchida produziram buffers de pixels idênticos. O caminho pintado com tracejado e os segmentos separados também produziram buffers idênticos. A figura do navegador mostra esses mesmos SVGs originais.

Esse resultado estabelece um ponto restrito: aparência igual não comprova geometria igual. Não estabelece como o Cricut Design Space importa os arquivos, quais percursos cria, se mantém o tracejado ou como o material dobra após vincar. Não importamos esses exemplos no Design Space nem executamos uma máquina.

Um único elemento de caminho SVG pode conter vários subcaminhos desconectados, então contar elementos de caminho não é um diagnóstico geral. Confira onde as rotas começam, terminam e fecham. Se você tenta recuperar uma linha central de um desenho digitalizado, o guia de SVG de linha única aborda essa outra tarefa de traçado.

A conferência documentada da Cricut vem após revisar a geometria

O guia atual Selecting Operation da Cricut orienta selecionar a camada do design e escolher sua operação no menu Operation. A operação escolhida aparece no painel Layers, e as opções correspondem à máquina selecionada. Para uma dobra destinada a vinco, confira se o objeto importado correto tem a atribuição Score pretendida.

O posicionamento é outra conferência. A Cricut documenta Attach como função que preserva a posição relativa de corte e prende camadas Score, Draw ou Foil a uma camada Cut. Em um cartão, a dobra e o perímetro precisam ter a relação pretendida na prévia do projeto e na tela de design.

São próximas conferências baseadas na documentação. Não testamos essa atribuição ou Attach com os arquivos de exemplo. Um rótulo de operação não prova que uma faixa fechada virou linha central, e uma cor no arquivo não prova a operação escolhida. Inspecione separadamente a representação importada, a operação atribuída e a posição; depois teste ferramenta e material reais.

Para verificações mais amplas de importação, camadas e base de corte, use nosso guia de preparação SVG para Cricut. Ele explica por que agrupar para organizar difere de preservar a disposição de produção pretendida.

Separe o traçado decorativo da dobra

Se o motivo decorativo do cartão existir apenas como PNG ou JPG chapado, o fluxo de arte para Cricut do PerfectVector pode reconstruir um candidato SVG dessa imagem. Inspecione as formas recuperadas e depois mantenha a decoração separada da dobra e do perímetro externo criados intencionalmente. A vetorização cria caminhos a partir de pixels; ela não infere a dobra do designer, não escolhe Score para uma camada importada nem testa o resultado da máquina.

Preserve um motivo vetorial existente quando disponível. O motivo circular do nosso exemplo foi criado diretamente e não foi traçado. Uma referência reta simples de dobra também pode ser criada diretamente; traçar uma captura de tela do cartão inteiro acrescenta uma reconstrução à geometria que você já conhece.

A inspeção do arquivo termina quando você consegue identificar as rotas reais da dobra, sua representação por traço ou preenchimento, os espaços pretendidos e o perímetro separado do cartão. As próximas conferências pertencem ao projeto de destino e a um teste de material. Nossa introdução à vetorização explica o que o traçado consegue ou não reconstruir antes dessa entrega.

Perguntas frequentes

Uma linha SVG vermelha ou tracejada significa automaticamente Score? Não deduza a operação pela cor ou aparência. Inspecione a geometria de origem e a operação atribuída no destino. A Cricut documenta separadamente a seleção de operações para camadas do design.

Por que uma linha de dobra e uma faixa preenchida podem parecer idênticas? Um traço pinta largura visível ao redor de uma rota aberta, enquanto uma faixa preenchida pinta o interior de um limite fechado. Criamos exemplos equivalentes que produziram pixels raster idênticos apesar das estruturas de caminhos diferentes.

Linhas tracejadas de vinco são sempre caminhos separados? Não. Um caminho contínuo pode ter pintura de traço tracejada. Nosso exemplo de segmentos separados armazena sete caminhos abertos independentes. Inspecione extremos e subcaminhos para distinguir.

Attach corrige a geometria errada da dobra? Trate geometria e posição como conferências separadas. A Cricut documenta Attach para preservar posição e prender outras operações a uma camada Cut. Essa documentação não comprova que o objeto importado tem a linha central ou os espaços pretendidos.

Fontes

  1. W3C: Caminhos SVG — Comandos de caminho, subcaminhos desconectados e comportamento de fechamento.
  2. W3C: Tracejado de traços SVG — Pintura tracejada do traço distinta dos dados de caminho subjacentes.
  3. Cricut: Selecionar operação — Atribuir operações a camadas e conferir as opções disponíveis da máquina escolhida.
  4. Cricut: Como usar Attach — Posicionamento relativo e união de camadas Score ou outras operações a uma camada Cut.

Precisa recuperar a decoração do cartão de um bitmap? Crie um candidato SVG de arte para Cricut, inspecione as formas e mantenha separado da rota de dobra antes de conferir operações e posição no projeto de corte.

Mais do blog

PerfectVector

Prepare caminhos SVG limpos para
corte e produção

Sem cartão de crédito