SVG e Otimização
184 views
Skip to first unread message
Rafael Ávila
Jul 2, 2013, 3:28:04 PM7/2/13
to livro-we...@googlegroups.com
Boa tarde Sérgio,
Comprei o livro assim que recebi a sua resposta e já estou quase terminando, estou na parte de formulários, exatamente em Placeholders não são labels, rs.
Mas estou em uma dúvida agora justamente já lida no livro e exatamente aqui em um projeto pessoal. Eu vejo sem dúvida muita vantagem no uso do SVG, mas olhando para otimização web que é bom utilizar sprites para as imagens que normalmente usamos como ícones, imagens de cabeçalho de uma categoria e até uma imagem maior para background, tudo isso em um único arquivo e ganhando um request, mas justamente estou lendo alguns artigos de fora para ver se vejo alguma possibilidade de tentar trabalhar com o svg sendo sprite - nessa procura, visitando o blog do Ben Frain vi um comentário seu em um artigo dele sobre SVG - e vc disponibilizou um link sobre o svg_stack, onde vários svgs se tornam apenas um, mas nesse caso, instalar algo no servidor compartilhado (tentar ter uma permissão), com Wordpress, mesmo sendo python, talvez não seja tão bom para um trabalho pequeno em servidor compartilhado, o que vc acha? Caso a resposta seja true, então tem como fazer isso no inkscape por exemplo para projetos pequenos, ou de alguma outra forma, parecido com os sprites com PNG?
Sobre a questão de oferecer o png para os queridos navegadores sem suporte a solução é usar o o bom e velho modernizr e utilizar o seu no-svg no css e chamar a sua imagem png?
Comprei o livro assim que recebi a sua resposta e já estou quase terminando, estou na parte de formulários, exatamente em Placeholders não são labels, rs.
Mas estou em uma dúvida agora justamente já lida no livro e exatamente aqui em um projeto pessoal. Eu vejo sem dúvida muita vantagem no uso do SVG, mas olhando para otimização web que é bom utilizar sprites para as imagens que normalmente usamos como ícones, imagens de cabeçalho de uma categoria e até uma imagem maior para background, tudo isso em um único arquivo e ganhando um request, mas justamente estou lendo alguns artigos de fora para ver se vejo alguma possibilidade de tentar trabalhar com o svg sendo sprite - nessa procura, visitando o blog do Ben Frain vi um comentário seu em um artigo dele sobre SVG - e vc disponibilizou um link sobre o svg_stack, onde vários svgs se tornam apenas um, mas nesse caso, instalar algo no servidor compartilhado (tentar ter uma permissão), com Wordpress, mesmo sendo python, talvez não seja tão bom para um trabalho pequeno em servidor compartilhado, o que vc acha? Caso a resposta seja true, então tem como fazer isso no inkscape por exemplo para projetos pequenos, ou de alguma outra forma, parecido com os sprites com PNG?
Sobre a questão de oferecer o png para os queridos navegadores sem suporte a solução é usar o o bom e velho modernizr e utilizar o seu no-svg no css e chamar a sua imagem png?
Rafael Ávila
Jul 2, 2013, 4:37:52 PM7/2/13
to livro-we...@googlegroups.com
Sérgio, encontrei esse artigo da smashing bem interessante: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/.
Sérgio Lopes
Jul 3, 2013, 2:27:56 PM7/3/13
to Rafael Ávila, livro-we...@googlegroups.com
Oi Rafael!
SVG é um bom tópico e algo que tenho estudado e usado bastante ultimamente.
Minha primeira sugestão seria fazer a geração das sprites (SVG ou não) no build e não em runtime no wordpress/python. Você usaria um script de build pra rodar na sua máquina de desenvolvimento e já fazer a sprite final antes de subir tudo no servidor do cliente. Aí você não teria problemas em precisar instalar nada no servidor compartilhado...
De ferramentas em si, há muitas possíveis. Aquele svg_stack que eu comentei é bem legal pra gerar uma imagem só. Outra ferramenta mais automática pra gerar o svg e o css necessários é o grunticon, um plugin pro grunt. Ele vai fazer já os fallbacks em PNG e fazer a detecção (como o Modrrnizr que vc citou) pra carregar o arquivo certo.
Já usou o Grunt? Senao tenho um post de introducao que fiz essa semana: http://blog.caelum.com.br/automacao-de-build-de-front-end-com-grunt-js/
O grunticon está aqui: https://github.com/filamentgroup/grunticon
Abraços,
Sérgio
Rafael Ávila
Jul 9, 2013, 4:19:16 PM7/9/13
to livro-we...@googlegroups.com, Rafael Ávila, sergio...@caelum.com.br
Boa tarde Sérgio,
Cara, levei uma surra de algumas horas para implementar o sprite svg com fallback para png, utilizando o no-svg do modernizr, tudo por causa de um erro no css e depois no IE 7 e 8 que são png eles pegavam a imagem mas repetiam outras, depois percebi que eu teria que identificar o width e height das divs para poder mostrar corretamente, enquanto nos outros funcionava bem informando o background-position e o width e height na classe x do css, ou seja, tive que usar o width e height duas vezes, ainda analisarei se fiz algo errado, mas está funcionando legal.
Agora o problema é, o IE 9 e 10 estão apresentando as imagens - sprites - svg distorcidos, como se estivessem mais curtos na vertical e em alguns casos aparecendo duas metades de sprites diferentes, o que pode ser? Pois já procurei bastante sobre o problema e até agora nada, estou até procurando sobre os tipos de svg, por exemplo 1.1 ..., para ver se pode ser isso.
Cara, levei uma surra de algumas horas para implementar o sprite svg com fallback para png, utilizando o no-svg do modernizr, tudo por causa de um erro no css e depois no IE 7 e 8 que são png eles pegavam a imagem mas repetiam outras, depois percebi que eu teria que identificar o width e height das divs para poder mostrar corretamente, enquanto nos outros funcionava bem informando o background-position e o width e height na classe x do css, ou seja, tive que usar o width e height duas vezes, ainda analisarei se fiz algo errado, mas está funcionando legal.
Agora o problema é, o IE 9 e 10 estão apresentando as imagens - sprites - svg distorcidos, como se estivessem mais curtos na vertical e em alguns casos aparecendo duas metades de sprites diferentes, o que pode ser? Pois já procurei bastante sobre o problema e até agora nada, estou até procurando sobre os tipos de svg, por exemplo 1.1 ..., para ver se pode ser isso.
Rafael Ávila
Jul 10, 2013, 10:44:30 AM7/10/13
to livro-we...@googlegroups.com, Rafael Ávila, sergio...@caelum.com.br
Bom dia Sérgio,
Talvez descobri o problema em relação ao css sprite com svg no IE9, 10 e depois testado no Opera mobile Emulator tb tinha o problema. Talvez seja interessante para as pessoas que querem utilizar o SVG e pode ser que entre como observação no seu livro, sei lá, rs:
CUIDADO com as Otimizações do SVG, principalmente se ela atacar muito os cabeçalhos sobre o tipo do svg, tamanho e etc.
Quando verifiquei que o sprite svg estava deformado e incrivelmente borrado no Opera, bem pior do que no IE, lembrei do artigo do Ben -> http://benfrain.com/tips-for-using-svgs-in-web-projects/ , fui verificar novamente o que ele falava das versões e abri o meu SVG no editor, e verifiquei que o meu svg estava muito sucinto no cabeçalho e logo pensei, rapaz foi o meu super otimizador que transformou meu sprite de 59kb para 23kb que deve ter retirado coisas a mais. Verifiquei o arquivo original e o otimizado e foi mesmo, no caso ele tirou a versão do SVG e várias coisas a mais.
Então coloquei o SVG original e os problemas acabaram, agora rodou em todos os navegadores que eu tenho em mão aqui com o suporte ao SVG, então fica a lição de ter cuidado com a otimização, eu acho ela super importante e gostei muito do programa que usei para otimizar no primeiro momento, vou verificar as suas configurações para ver se ele não retira algumas coisas, ou faço no dedo mesmo até ver qual o ponto de equilíbrio.
O SVG foi criado no Inkscape, ainda vou verificar se ele pode criar o SVG do tipo 1.2 (mais adaptado a vários navegadores, menos no IE, rsrs), o SVG criado aqui foi o 1.1. O programa utilizado para otimizar foi o SVG Cleaner. Seria interessante se alguém comentar um menos eficiente, rs, mas o SVG Cleaner tem quatro configurações básicas, no meu caso usei a completa.
Nota: Parece que o svg 1.1 é muito bom para dispositivos móveis, mas pelo menos aqui em desktop não vejo nenhum problema, pelo menos depois do ocorrido.
Talvez descobri o problema em relação ao css sprite com svg no IE9, 10 e depois testado no Opera mobile Emulator tb tinha o problema. Talvez seja interessante para as pessoas que querem utilizar o SVG e pode ser que entre como observação no seu livro, sei lá, rs:
CUIDADO com as Otimizações do SVG, principalmente se ela atacar muito os cabeçalhos sobre o tipo do svg, tamanho e etc.
Quando verifiquei que o sprite svg estava deformado e incrivelmente borrado no Opera, bem pior do que no IE, lembrei do artigo do Ben -> http://benfrain.com/tips-for-using-svgs-in-web-projects/ , fui verificar novamente o que ele falava das versões e abri o meu SVG no editor, e verifiquei que o meu svg estava muito sucinto no cabeçalho e logo pensei, rapaz foi o meu super otimizador que transformou meu sprite de 59kb para 23kb que deve ter retirado coisas a mais. Verifiquei o arquivo original e o otimizado e foi mesmo, no caso ele tirou a versão do SVG e várias coisas a mais.
Então coloquei o SVG original e os problemas acabaram, agora rodou em todos os navegadores que eu tenho em mão aqui com o suporte ao SVG, então fica a lição de ter cuidado com a otimização, eu acho ela super importante e gostei muito do programa que usei para otimizar no primeiro momento, vou verificar as suas configurações para ver se ele não retira algumas coisas, ou faço no dedo mesmo até ver qual o ponto de equilíbrio.
O SVG foi criado no Inkscape, ainda vou verificar se ele pode criar o SVG do tipo 1.2 (mais adaptado a vários navegadores, menos no IE, rsrs), o SVG criado aqui foi o 1.1. O programa utilizado para otimizar foi o SVG Cleaner. Seria interessante se alguém comentar um menos eficiente, rs, mas o SVG Cleaner tem quatro configurações básicas, no meu caso usei a completa.
Nota: Parece que o svg 1.1 é muito bom para dispositivos móveis, mas pelo menos aqui em desktop não vejo nenhum problema, pelo menos depois do ocorrido.
Sérgio Lopes
Jul 10, 2013, 3:05:19 PM7/10/13
to Rafael Ávila, livro-we...@googlegroups.com
Que bom que resolveu, Rafael!
Você teria aí os cabeçalhos dos 2 SVGs? Digo, o mega otimizado sem quase nada e o normal completo? Queria dar uma olhada pra tentarmos identificar o que exatamente causou seu problema.
Aqui eu tenho usado uma versão bem simples do cabeçalho com só: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
(não coloco versão se meu SVG é bem simples e compatível com versões antigas)
Uma mudança que faço pra melhorar a compatibilidade é trocar o width/height que o Inkscape usualmente coloca pra usar só o viewBox. Lembro que o Firefox tinha problemas sérios em escalar um SVG com width fixo...
E a ferramenta que mais tenho usado pra otimizar meus SVGs é o svgo: https://github.com/svg/svgo
Mas no proprio Inkscape, o Salvar Como > Optimized SVG também funciona bem... (acho que ele usa o scour: http://www.codedread.com/scour/)
Abraços!
Rafael Ávila
Jul 11, 2013, 3:52:00 PM7/11/13
to livro-we...@googlegroups.com, Rafael Ávila, sergio...@caelum.com.br
Boa tarde Sérgio,
Aqui é o inicio do otimizado, logo depois começa a codificação do desenho:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1084.5">
Obs.: Ele (SVG Cleaner) mesmo já converte para viewBox. O cabeçalho está igual ao que você passou, no meu caso a diferença é o tamanho do sprite svg, mas lembrando que no IE 10 e 9 e mais o Opera Mobile simulator as imagens estavam feias e distorcidas.
Parte Inicial do original:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="960"
height="1084.5"
id="svg3877"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="sprite-img.svg"
inkscape:export-filename="G:\Documentos\design\Sprite\sprite-img.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs3879" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="400.15307"
inkscape:cy="901.26648"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1024"
inkscape:window-height="706"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
width="1066.5px"
showguides="true"
inkscape:guide-bbox="true"
borderlayer="false" />
Como estou fazendo a parte final da ilustração do meu site, não testei diminuindo o processo de otimização do SVG Cleaner, quando eu acabar aqui vou testar.
Aqui é o inicio do otimizado, logo depois começa a codificação do desenho:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1084.5">
Obs.: Ele (SVG Cleaner) mesmo já converte para viewBox. O cabeçalho está igual ao que você passou, no meu caso a diferença é o tamanho do sprite svg, mas lembrando que no IE 10 e 9 e mais o Opera Mobile simulator as imagens estavam feias e distorcidas.
Parte Inicial do original:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="960"
height="1084.5"
id="svg3877"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="sprite-img.svg"
inkscape:export-filename="G:\Documentos\design\Sprite\sprite-img.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs3879" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="400.15307"
inkscape:cy="901.26648"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1024"
inkscape:window-height="706"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
width="1066.5px"
showguides="true"
inkscape:guide-bbox="true"
borderlayer="false" />
Como estou fazendo a parte final da ilustração do meu site, não testei diminuindo o processo de otimização do SVG Cleaner, quando eu acabar aqui vou testar.
Reply all
Reply to author
Forward
0 new messages