Vale a pena aprender o atributo de caminho SVG ou devo usar uma ferramenta para desenhar?


7

Existe uma vantagem de criar manualmente o gráfico com o elemento path e o atributo d (acho que com a ajuda da matemática?), Em usar uma ferramenta como o Inkscape para desenhar o gráfico? O Inkscape gera código SVG mais ineficiente?

Respostas:


1

Aqui está uma página com vários tutoriais em SVG, um deles sobre Paths.

Usei-o para desenhar muitos círculos com a ajuda de um programa e, para minha surpresa, há uma definição de círculo central no SVG que é muito mais simples do que o que o Inkscape produz quando os desenhei à mão.

Mas o Inkscape estava bem em ler esse formato e desenhou o que eu esperava. Apenas ao salvar o arquivo, ele adicionou seu próprio padrão.

Portanto, eu recomendaria aprender com esses tutoriais e não (apenas) na exibição do inspetor SVG que o inkscape oferece.


6

Bem, existem duas escolas aqui ....

  • Pergunte a um designer de impressão se ele / ela pode escrever código postscript e eles rirão de você. Os designers de impressão nunca se interessaram em aprender a codificar manualmente um arquivo postscript para saída. Eles dependem inteiramente dos editores WYSIWYG (Photoshop, Indesign, Illustrator, etc.). Portanto, a resposta seria um não enfático .

  • Pergunte a um web designer se ele / ela pode escrever uma marcação ou código para criar um site e você geralmente verá um "sim". A maioria dos editores da Web WYSIWYG não é tão proficiente quanto um ser humano. Claro que podem ser mais rápidos, mas nem sempre são tão detalhados ou detalhados em algumas áreas. Muitos designers / desenvolvedores web versados preferem criar manualmente marcações / códigos. Então pergunte a este grupo e você receberá um sim geral .

Agora, se escrever ou não diretamente o código svg é valioso para você, é outra questão. Eu, pessoalmente, não dou a mínima como o código SVG é escrito, desde que seja exibido como eu esperava. Também sei que posso usar um editor WYSIWYG e, em seguida, abrir manualmente o svg em um editor de texto para "ajustar", se necessário. Então, eu não sei, e não quero saber, todos os meandros do código svg. Eu aprendo como preciso.

  • Um benefício para escrever seu próprio svg seria o controle . Escrevendo manualmente, muitas vezes você pode ser muito mais detalhado e estruturado do que qualquer método automático. Veja o marcador da web acima. Se você é do tipo meticuloso, pode encontrar muita satisfação em poder criar gráficos svg a partir de um editor de texto.

  • Um impedimento seria o tempo. Geralmente, é muito mais rápido usar um editor WYSIWYG. Ou use o editor e entre e altere manualmente o código svg.

Então é realmente a sua decisão.

Quanto aos benefícios para os outros (empregadores / clientes, etc.), isso é difícil de dizer e dependeria muito da sua proficiência e velocidade. Se você pode criar um gráfico svg escrito manualmente, ao mesmo tempo que é necessário para abrir o Illustrator / inkscape draw e salvar, isso pode ser valioso para terceiros. No entanto, se você demorar duas ou três vezes mais para escrever o código, bem, não conheço ninguém que queira a mesma coisa pelo dobro do preço.


Ponto de vista interessante. Uma terceira maneira é a maneira do desenvolvedor : SVG é um tipo valioso de saída para aplicativos porque é preciso e simples de gerar (e a resposta seria um óbvio sim ).
Paolo Gibellini

@PaoloGibellini, sim, isso foi o que eu estava falando na bala "web". Se você deseja controle absoluto, certamente não há método melhor - assim como na marcação.
Scott

Concordo, mas pode ser interessante até mesmo a distinção entre o desenvolvedor da web, que usa o SVG em um contexto específico (como imagens na página da web) e o desenvolvedor, que usa o SVG como saída de um software de elaboração (como diagrama ou como elemento para ser colocado em um relatório ou uma pesquisa).
Paolo Gibellini

3

SVG não é terrivelmente difícil de escrever à mão. É um pouco exagerado para o meu gosto pessoal, mas isso além do ponto.

Depende do que você faz

Existem vários motivos para saber como escrever um arquivo vetorial manualmente.

  1. Você tem acesso a alguns dados e precisa abri-los em um editor de gráficos. Despejar os dados em SVG, EPS ou DWG é relativamente fácil. Você pode processá-lo ainda mais em qualquer aplicativo.

    Isso pode torná-lo incrivelmente muitas vezes mais produtivo em alguns casos. Mas você nunca pode atingir a produtividade se nunca se incomodar em aprender o formato. Se você é um programador, você definitivamente deve aprender por esse motivo.

    Exemplo de pergunta e caso de uso: import-vector-data-into-illustrator

  2. Você está fazendo algo que seu editor não faz bem. Ainda existem coisas que são mais fáceis de fazer nos editores não gráficos. O mais notável é a composição matemática, mas às vezes outras coisas, como a geração de meio-tom personalizada, etc.

    Uma grande base de dados SVG aqui é a geração de CSS para algum uso interativo. Ou preparação de animação svg. Mas não se limita apenas a isso. Em muitos casos, um loop for ou um simples localizar e substituir, ou alguns copypastes de texto, podem fazer maravilhas que seriam extremamente tediosas à mão. Ser capaz de compor transformações aninhadas pode ser usado para geração de fractal de uma maneira que seria um pesadelo na sua GUI.

Mas se você sabe como fazer isso, surgem todos os tipos de razões estranhas. Tal como:

  1. Você precisa desenhar uma imagem, mas tudo que você tem é um terminal. Além de descrever como uma sequência acontece, poder ler o que eu fiz é um bônus. Exemplo deste tipo pode ser encontrado aqui

Em geral

Para a maioria dos usuários, não é significativo aprender. Então não. Mas não é demais saber disso, então você pode passar algumas semanas sobre o assunto, se achar interessante. Pode valer a pena.

É certo que a necessidade não aumenta com muita frequência, mesmo para mim.


Embora válido, seu primeiro ponto não é exatamente o que eu chamaria de "manualmente". A distinção importante a ser feita aqui é entre gerar caminhos manualmente e ter o conhecimento necessário para gerar caminhos manualmente. O último é o que é importante.
Wrzlprmft

Para fazer algo automático, você precisa fazê-lo manualmente até certo ponto @Wrzlprmft. Então você provavelmente faria 10% manualmente e, em seguida, agruparia o restante em um loop. Fazer manualmente é o esboço do automático. E observe que o usuário está perguntando como aprender a fazê-lo. Você começa manualmente em todos os casos.
Joojaa

Não necessariamente. Eu automaticamente brinquei muito com as curvas de Bézier, mas nunca programei uma totalmente manualmente. No meu curso numérico, uma vez programei um renderizador Bézier, mas, quando encarregado de testá-lo com alguns dados, obtive-o imediatamente no Inkscape.
Wrzlprmft

Claro, um caso de uso um pouco diferente, mas você não precisa ir tão fundo no svg. Você ainda precisa preencher os pontos comparáveis ​​à pesquisa e substituição, de modo que não é realmente manual, mesmo ao usar um editor de texto. Portanto, em muitos casos, automático pode significar pesquisar e substituir no seu despejo de dados.
Joojaa

O que estou percebendo é que não há muito que seja totalmente manual em um computador. YMMV, no que diz respeito a tudo, é o mesmo.
Joojaa

2

Para responder suas perguntas literais:

Existe uma vantagem de criar manualmente o gráfico com o elemento path e o atributo d (acho que com a ajuda da matemática?), Em usar uma ferramenta como o Inkscape para desenhar o gráfico?

Muito raramente. Normalmente, nunca uso as ferramentas WYSIWYG, mas, para projetar gráficos, uso. Além disso, você pode ajustar manualmente as posições dos nós e similares da interface do Inkscape, se desejar.

No entanto, saber como você geraria caminhos manualmente pode ser muito valioso:

  • Saber o que acontece nos bastidores ajuda a entender melhor o que você faz ao usar as ferramentas WYSIWYG. Existe uma forte relação com: A matemática é necessária para o design gráfico? . Para um exemplo que é diretamente sobre as curvas subjacentes da matemática, gostaria de me referir a esta resposta minha .

  • Se você souber como geraria caminhos manualmente, também saberá como manipular SVGs automaticamente, ou seja, com um programa. A resposta de Joojaa já deu um bom exemplo disso.

O Inkscape gera código SVG mais ineficiente?

Sim. O código do Inkscape não tem como objetivo ser pequeno. Existem ferramentas específicas para reduzir o tamanho do arquivo SVG, mas elas só podem ir tão longe, porque não sabem o que é importante. Se você precisar ir mais longe, por algum motivo, precisará "golf" manualmente o seu SVG, consulte esta resposta para um exemplo. Ainda assim, se você fizer isso, geralmente começará com um SVG gerado por WYSIWYG e não do zero.


2

A resposta é ambas. É por isso que ambas as opções existem.

Não quero dizer que alguns gráficos são feitos em um aplicativo de desenho e outros feitos com código, quero dizer que, com cada gráfico que você cria, você tem essas ferramentas prontas:

  • caneta
  • ferramenta de desenho vetorial
  • Editor de código UTF-8

… Porque esse é o kit de ferramentas SVG. E de um modo geral, você os usa nessa ordem.

Para cada gráfico criado, você pode usar 99% de desenho e 1% de código ou 10% de desenho e 90% de código ou 50:50. Mas se você deseja criar o melhor gráfico possível, é altamente improvável que você use apenas desenho ou apenas código.

A parte do código pode ser apenas otimização, animação, ou criar um gráfico simples e criar um gráfico complexo com rotações, ou apenas verificar se você não criou acidentalmente um SVG que apenas possui um bitmap incorporado nele. Mas, em última análise, você está criando e publicando código, pelo menos deseja assinar o que está enviando.

Por outro lado, se você quiser criar um gráfico interessante com alguma arte, alguma vida útil, ganhará muito usando os olhos e o córtex visual para criar pelo menos um primeiro rascunho do seu gráfico final. Convém importar clipart como ponto de partida ou usar gráficos criados anteriormente como modelos. Esses e outros métodos de produção de gráficos vetoriais testados e aprovados não são descartados porque o SVG é armazenado como um documento XML da Web editável por texto. O documento XML é um recurso adicional para produção de gráficos vetoriais, não um substituto para o desenho.

Em resumo: use o kit de ferramentas inteiro. Não amarre uma das mãos atrás das costas.


Bem, na verdade não, talvez, ou não exatamente. O motivo de você ter formatos legíveis por humanos é porque facilita a depuração e a programação. Nunca foi originalmente concebido para substituir o software. Mas, com o passar dos anos, os formatos começaram a viver uma vida própria e se tornaram algo que o software não conseguiu igualar. Eles se tornaram flexíveis demais para as GUIs e se transformaram em tipos de descrições que poderiam ser usadas de maneira muito ampla para o lado da GUI acompanhar. Portanto, a marcação era boa para os desenvolvedores originais, mas no final eles superaram seu objetivo original.
Joojaa

-1

Como você está perguntando no fórum de design gráfico, a resposta é não.

Se você estava perguntando no stackoverflow.com, sim.


Embora eu ache que essa é a resposta que você obteria se perguntasse a essas duas comunidades o que elas mesmas fazem / fariam - não acho que essa seja a resposta para a pergunta.
Cai
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.