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:
Tentei alterar a posição da prancheta, mas a origem da caixa de visualização nunca é 0,0.
Respostas:
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
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.
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.
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)
Sei que isso é muito tarde para o tópico, mas tive o mesmo problema e fiz o seguinte.
Espero que isso ajude outra pessoa.
width="<W>" height="<H>"seu editor de texto favorito à tag SVG também ajuda (onde <W>e <H>seriam números decimais).
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.
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.
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.
Consegui corrigi-lo usando o Inkscape . Parece que o Illustrator não oferece suporte a arquivos SVG.
