Alterar atributo da caixa de visualização em svg exportado pelo illustrator


38

Eu tenho um arquivo SVG com viewBox = "- 155,7 -99 510 510". Acredito que isso compensou os caminhos na visualização do Mac OS X em -155,7 -99. Quando abro o SVG no Illustrator, os caminhos não são deslocados. como eu exporto este svg de modo que:

  1. viewBox = "0 0 510 510"
  2. e todos os caminhos adicionaram o conjunto de -155,7 -99

Tentei alterar a posição da prancheta, mas a origem da caixa de visualização nunca é 0,0.

Respostas:


6

Eu fiz uma pequena pesquisa sobre SVGs e, aparentemente, a caixa de exibição não é um elemento exportável via Illustrator. O elemento viewbox é compatível apenas com certos programas que escolheram usá-lo ou manipulá-lo. Infelizmente, o Illustrator não é um deles.

Se você salvou o SVG do Illustrator sem "Preservar recursos de edição do Illustrator", poderá reverter o processo. Quaisquer alterações feitas nos dados do arquivo SVG serão refletidas no Illustrator, mas através do reposicionamento e redimensionamento da prancheta e das camadas para criar uma pseudo-caixa de visualização.

Por enquanto, tudo o que você pode fazer é projetar o trabalho no Illustrator e todo o código extra para deslocamento e posicionamento da caixa de exibição nos dados do arquivo. Você pode criar uma pseudo-caixa de visualização simplesmente alterando a posição Largura das pranchetas + Altura / X + Y e alterando também os atributos Tamanho e Posição dos objetos. Mas nunca haverá um atributo verdadeiro da caixa de exibição, a menos que eles lançem uma atualização no Illustrator com recursos editáveis ​​da caixa de visualização.

Algumas leituras sobre o formato SVG no Illustrator: Adobe Illustrator Salvar no formato SVG


1
O Illustrator exporta o atributo viewbox a partir do Illustrator CC (v 17.x).
Jake Wilson

33

Eu já me deparei com esse problema várias vezes, e a única coisa que já funcionou para eu redefinir com segurança a caixa de exibição SVG para precisamente 0, 0 quando exportar do Illustrator é criar um novo documento em branco e copiar e colar a arte-final nele .

O canto superior esquerdo desta prancheta padrão intocada será exportado como ponto 0, 0 da caixa de exibição. Use guias inteligentes ( cmd-u) ou a alignjanela definida como Align to Artboardse você precisar que seu trabalho artístico inicie exatamente em 0, 0.

Você pode redimensionar a prancheta com segurança no canto inferior direito, mas as coisas começam a dar errado se você mover o canto superior esquerdo. Mover o canto superior esquerdo das pranchetas ou importar arquivos SVG para AI parece causar algum tipo de desconexão interna estranha entre as réguas, pranchetas e algum tipo de ponto de origem invisível e invisível da caixa de exibição secreta conhecido apenas pelo Illustrator.


AFAICT, como na maioria das coisas relacionadas à Web ou à tecnologia emergente, a abordagem da Adobe ao SVG tem sido a de juntar algo grosseiramente para que eles possam se gabar disso em um comunicado de imprensa e deixá-lo com bugs, inacabado e não amado, fingindo que não. existir e continuar como se fosse 1998.


1
Isso não funciona para mim usando o Illustrator CC. Também tentei o tamanho personalizado Ajustar prancheta à arte-final. O SVG final sempre tem uma viewport centralizada.
wprater

1
Estranho - definitivamente pode funcionar no CS6. Deve ter mudado entre CS6 e CC - embora pareça uma mudança estranha.
usar o seguinte comando

1
@ user568458 Essa é a técnica que eu também uso, não exata, mas muito semelhante. Quaisquer transformações na 'Prancheta' no Illustrator serão convertidas diretamente nos valores da viewboxalteração na exportação para SVG. Você está completamente correto ao criar um novo documento e copiar sobre todo o trabalho artístico. Sua resposta deve ser marcada como +1 correta.
Terry

2
A Adobe apoiava muito o SVG, mas foi quando o svg estava surgindo, que eles não faziam nada nessa frente há vários anos após a aquisição da Macromedia, porque queriam que o flash fosse bem-sucedido.
Joojaa

1
Estou usando o Adobe Illustrator CC 18.1.0 e criando um documento completamente novo, copiando e colando meu svg e, em seguida, salvar novamente parece fazer o truque. Também certifico-me de verificar Preserve Illustrator Editing Capabilitiesa primeira vez que salvar, caso precise fazer mais ajustes e depois que eu achar que tudo está muito bom, eu o salvo sem ele (o aumento no tamanho do arquivo é bastante significativo, então você deve fazer isso isso)
6/01/2015

7

Sei que isso é muito tarde para o tópico, mas tive o mesmo problema e fiz o seguinte.

  1. Abra o SVG em um editor de texto e altere o atributo viewBox para 0 0 xy
  2. Salve e reabra no Illustrator
  3. A obra de arte agora será posicionada fora da prancheta - mova-a de volta para 0 0
  4. Salve e visualize, tudo deve estar funcionando bem.

Espero que isso ajude outra pessoa.


Olá Mark, seja bem-vindo ao GDSE e obrigado pela sua resposta. Se você tiver alguma dúvida, consulte a Central de Ajuda ou envie um ping para um de nós no chat assim que sua reputação for suficiente (20). Continue contribuindo e aproveite o site!
Zach Saucier

Descobri que adicionar width="<W>" height="<H>"seu editor de texto favorito à tag SVG também ajuda (onde <W>e <H>seriam números decimais).
jtheletter

4

Eu tive um problema muito semelhante ao de minha SVG criada pela IA não ser centralizada e expandida para a janela completa do navegador, porque a AI continua alterando o tamanho da prancheta e esquece a centralização.

A única maneira de corrigi-lo é ter uma etapa final de processamento manual no Inkscape.

  • abra o SVG no Inkscape
  • redimensione a tela em Arquivo -> Propriedades do documento
  • redimensione e mova seu trabalho artístico selecionando-o e digitando w, h nas edições da barra de ferramentas

Por fim, você precisa salvar o SVG novamente, mas use o formato "SVG otimizado" na caixa de diálogo Salvar como. Haverá uma caixa de diálogo para as opções SVG e você deverá habilitar "Ativar viewboxing".

Como todos os meus SVGs são ícones do mesmo tamanho, essa etapa do processamento leva apenas 1 minuto, pois eu sempre tenho o mesmo tamanho de tela e objeto. Mas sim, é uma pena que esta etapa seja necessária e deva ser corrigida na IA.


0

Eu descobri isso. Finalmente! Existe uma maneira simples de fazer isso. Igual a:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

O problema era que, quando você exporta uma imagem do Illustrator (como muitos fazem), a prancheta não é incluída no SVG exportado. Os caminhos não têm nada em que basear seus cálculos.

No meu caso, a altura máxima para minhas imagens era 100pxe eu precisava basear os estilos CSS para essas imagens com base em sua largura e altura. No CSS, eu uso vwunidades, ou simplesmente, 100%se o SVG for preencher espaço em bloco. Isso escala bem. Dessa forma, você não se preocupa em definir a largura e a altura no CSS para garantir que seja exibido corretamente.

Analisei cada logotipo e configurei a altura para 100pxe deixei a largura calcular automaticamente com base na proporção. Em seguida, encaixo a prancheta no logotipo para remover qualquer espaço não utilizado.

Selecionei um retângulo, desliguei o preenchimento e o traçado e assegurei que ele tivesse exatamente o mesmo tamanho da prancheta. Coloque este objeto em branco na parte de trás. Agora, quando você exportar, o caminho terá uma base para trabalhar os cálculos.

Para fazer isso no código, parece que você pode agrupar os caminhos em a recte definir largura e altura, e depois definir viewBoxo mesmo (manter as proporções iguais). Como mostrado no exemplo acima. Na verdade, não testei isso, mas testarei e atualizarei.


0

Consegui corrigi-lo usando o Inkscape . Parece que o Illustrator não oferece suporte a arquivos SVG.

  1. Abra o arquivo svg no Inkscape CTRL + O
  2. Em seguida, crie um novo arquivo CTRL + N
  3. CTRL + SHIFT + D Documente Propriedades e ajuste o tamanho da prancheta. 3
  4. Selecione e copie o svg no arquivo recém-criado.
  5. Agora ajuste o ativo alterando os valores de posição e tamanho. Como definir a posição como Origem e largura e altura como tamanho do documento. 5
  6. Salve o novo arquivo.
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.