SVG como uma imagem
Irapuan Martinez
http://chrisfjay.blogspot.com/2007/07/svg-as-image-format.html
SVG as image format - There are two common methods for adding SVG to a
page - inline, via <svg>, and externally, via <object>.
The <object> element is bad. It's not semantic - it may as well be
called <other> or <miscellaneous>. Although useful in the short term
for displaying SVG, I would hope that this use will diminish.
The inline <svg> element is also bad, for the same reason - it's not
semantic. It's the equivalent of having a <jpg> element, rather than
using <img> - it's named after the format, rather than the purpose.
From the semantic perspective, there are three potential uses of SVG.
* Foreground images: use <img src="x.svg"> to point to an SVG file
* Background images: use CSS "background-image" to point to an SVG file
* Inline with connected DOM: use <iframe> to point to an SVG file.
These are much better because they re-use existing semantic elements.
Unlike foregrounds or inline images, backgrounds should not enable any
user interaction - events (e.g. mousedown), hyperlinks, pseudo-classes
(e.g. :hover), etc. Some people say javascript should be turned off -
this might be a rough and ready first implementation, but some
javascript might be appropriate (e.g. random placement of shapes, or
animation), so long as the "no user interaction" rule is followed.
The other advantage of <img> and CSS background-image over <svg> is
that you don't need to use XHTML. Standard HTML gets round a whole
series of issues with mime types, browser control, and backwards
compatibility.
Advantages of SVG as image format
SVG images fill a lot of gaps with HTML styling:
* rounded rectangles, circles, and any polygon
* fancy borders (arcs, swirls, etc)
* opacity, color gradients and filters
* shape hyperlinks and :hover, rather than pixel maps
* interaction via the DOM (for foreground images)
* scaling of background images multiple backgrounds (in one SVG)
* background text (e.g. graffitti, murals, etc)
* intricate website 'themes' to each page
The possibilities for graphical designers are huge.
Browser support - I'm very pleased to see that the next version of
Opera will support SVG images via <img> and background-image.
Unfortunately, it's not on the schedule for either Firefox 3 or Safari
3, although it's an aspiration for both teams.
There are four possible methods of using SVG in a webpage - <svg>,
<object>, <img>, and CSS backgrounds.
The SVG implementation status for Firefox and Safari is marked at
around 55%. Personally, while they only support two of these four
methods, I'd hold them at half this - 22%.
lee.rain o pet (Alessandro RS)
Fiz um exemplo que tinha nele, acabei desenhando um quadradinho com fundo gradiente \o/
Vejo uma boa utilidade nele pra desenhar gráficos (barras, linhas, pizzas) com ajuda de uma linguagem serverside.
Mas eu nem sabia que existia um elemento <svg> rsrsrs
--
[]'s & =*'s de lee.rain o pet
"In code we trust."
§ Alessandro Ramos dos Santos
§ http://edenfall.blogspot.com/
Eduardo Agni
O SVG por ser um formato de Desenho Vetorial baseado em XML poderia ser uma otima alternativa para termos imagens com qualidade bem superior aos Bitmaps no navegador, além de poder criar animações com ele e a ajuda de linguagens como Java Script...tudo com um carregamento bem mais rápido do que uma animação em Flash (pois o navegador teria apenas que renderizar texto...o que inclusive permite também a indexação pelos mecanismos de busca, diferentemente do Flash!).
Infelizmente tenho que dizer que "PODERIA ser uma alternativa", pois apesar de navegadores como o Firefox e o Opera suportarem nativamente o SGV (que também é um padrão da W3C), o Internet Explorer (sempre ele) não o suporta. Até suportava com a ajuda de um Plugin que foi criado pela Adobe, porém a Adobe anunciou que estará extinguindo este Plugin em 2008 (Talves por medo de "mais uma" possivel concorrência ao Onipotente Flash?).
Pra quem quiser conhecer, existe um Software Livre de Desenho Vetorial que tem como formato padrão o SVG. Este programa é o INKSCAPE (www.inkscape.org), e que além de poder criar o desenho de forma grafica, possui um editor XML, para analizarmos a modificarmos o código gerado pelo programa!
"Todas" as imagens (excessão de uma ou duas) do meu site - www.agni.art.br - foram criadas nesse programa, inclusive um dos objetivos do site é divulgar esse Programa (O site está a um bom tempo em atualização, mas dêem um desconto, ando trabalhando demais e sem tempo pra atualizar! rs), inclusive é possivel de encontra-lo na sessão de Downloads!
Quem quiser conhecer bons trabalhos feitos com o INKSCAPE, inclusive com Arquivos SVG para serem baixados, podem acessar www.inkscapebrasil.org
Até mais, abraço a todos!
Eduardo Santos
Web Designer
www.agni.art.br
lee.rain o pet (Alessandro RS)
Usei o inkscape já, muito bom!
Infelizmente no meu local de trabalho com ele não dava pra trabalhar (gráfica, na época)
Imagine eu aqui no trampo pulando todo eufórico: "O SVG tem código-fonte!!!" \o/
Quero utilizá-lo futuramente num projeto meu que tenho para apresentar algumas estatísticas dum banco de dados que estou montando. Via PHP/MySQL e SVG.
Pelo PHP dá pra gerar PNG/GIF mas daí não tem graça, quero fazer isso com SVG pra aprender msm!
Eduardo Agni
> (gráfica, na época)
Pois é, uma pena que o Inkscape não trabalhe com espaço CMYK, pra
Produção Gráfica não rola...alias, Desktop Publish em Software Livre
ainda é complicado. Eu trabalhava em uma agência onde usavamos
exclusivamente Software Livre (Trabalhavamos com Linux Ubuntu e
Slackware, Gimp, Inkscape e Xara, Scribus, Zope/Plone/Python), e pra
Web era tudo uma maravilha...mas quando pintava algo pra impressão
tinha que correr pra Illustrator ou Corel! (>>Desculpem fugir da
proposta da lista, sei que produção Gráfica não é o objetivo das
discussões!)
> Quero utilizá-lo futuramente num projeto meu que tenho
para apresentar
> algumas estatísticas dum banco de dados que estou
montando. Via PHP/MySQL e
> SVG.
> Pelo PHP dá pra gerar PNG/GIF mas daí não tem graça, quero
fazer isso com
> SVG pra aprender msm!
Nesta Agência que eu trabalhava eu tinha um Projeto junto ao
Programador de lá de fazermos com que o SVG fosse suportado no nosso
Servidor (Zope), iriamos fuçar o código do Firefox pra achar a parte
que dá suporte a SVG, fazer isso virar uma DLL no servidor pra que ele
suportasse o SVG e já mandasse ele renderizado para os navegadores,
acabando assim com o problema do IE não dar suporte (não sei se
expliquei direito, não sou programador nato, essa ia ser a parte do
meu amigo...eu iria me encarregar de criar animações com SVG e Java
Script...iriamos tentar criar uma alternativa ao Flash, já que nossa
ideia era trabalhar exclusivamente com Software Livre!)
Como vai dessa Agência...esse projeto acabou ficando meio de lado! :(
Hasta Luego...
Eduardo Santos
www.agni.art.br
Lucas Arruda (llbra)
JPG e GIF ja nao sao formatos interessantes para fazer contornos,
figuras que fazem parte do design do site.
Mas vale lembrar que muitas vezes o uso de CSS pode substituir
imagens na pagina.
[]s
--
Lucas Arruda
lucasarruda.com
Israel Cefrin
> Se a web fosse toda PNG e SVG tava otimo.
perfeitamente estes formatos.
Ok, a quem quero enganar? Substitua a palavra 'navegadores' por IE.
[]´s
--
Israel Cefrin
http://www.cefrin.com/blog
Lucas Arruda (llbra)
Ela até pode ser, faltaria somente os navegadores entenderem
perfeitamente estes formatos.
Ok, a quem quero enganar? Substitua a palavra 'navegadores' por IE.
O que, convenhamos, é um verdadeiro desafio.
The possibilities for graphical designers are huge.
Browser support - I'm very pleased to see that the next version of
Opera will support SVG images via <img> and background-image.
Unfortunately, it's not on the schedule for either Firefox 3 or Safari
3, although it's an aspiration for both teams.
Não entendi porque o SVG não deve ser incluso no Firefox e no Safari.
Principalmente no Safari, já que a Apple gosta tanto de inovação e puxa
muito para a área gráfica (e da beleza).
Acho que uma vez incluso para estes 3 é questão de tempo que o IE
inclua, pois alguns sites vão querer usufruir disso. E mesmo que façam
uma versão para "browsers com SVG" e outra para o IE, as pessoas
vão querer acessar o site com SVG e vão debandar do IE.... Pensando bem,
é uma boa que o IE não inclua.... :P
Lucas Arruda
lucasarruda.com
João Vagner
Irapuan Martinez
> > Browser support - I'm very pleased to see that the next version of
> > Opera will support SVG images via <img> and background-image.
> > Unfortunately, it's not on the schedule for either Firefox 3 or Safari
> > 3, although it's an aspiration for both teams.
>
> Não entendi porque o SVG não deve ser incluso no Firefox e no Safari.
> Principalmente no Safari, já que a Apple gosta tanto de inovação e puxa
> muito para a área gráfica (e da beleza).
Olhar a Apple pela estética dos seus produtos é o lado errado. É como
elogiar a estética da front page do Google! Há um brontossauro de
razões que destacam ambas as empresas, e tipicamente, são o foco nos
clientes, não na estética, que passa a ser mera consequência deste
foco.
Safari e Firefox não trazem suporte robusto ao SVG por quimeras
técnicas. Tenderão a melhorar com o tempo, assim como aconteceu com
CSS 1.
> Acho que uma vez incluso para estes 3 é questão de tempo que o IE
> inclua, pois alguns sites vão querer usufruir disso.
As coisas pegam não pelo seu apuro técnico, mas pelo interesse
econômico que geram. Vide o IE, que é a pior porcaria em se tratando
de browser, mas segue com folgados 90% do mercado.
Se há interesse comercial por detrás, pega. Simples assim. Isto
explicaria o que raios é este desprezo do mercado pelo SVG e uma
enorme atenção em relação ao Flash.
IE não roda nativamente SVG por uma razão que tem nome: Silverlight.
Pra quê a Microsoft iria se compatibilizar a rodar coisas que podem
rodar em qualquer lugar, quando podem forçar rodar um troço alienígena
que só rode nas dependências* do seu sistema operacional?
(* - notaram o trocadilho? Notaram?)
> E mesmo que façam
> uma versão para "browsers com SVG" e outra para o IE, as pessoas
> vão querer acessar o site com SVG e vão debandar do IE.... Pensando bem,
> é uma boa que o IE não inclua.... :P
Ai que está. O que fará estas pessoas adotarem o SVG. O simples fato
dele existir? Tem que haver conteúdo. Antes disto, é só conversa de
nerd.
Lucas Arruda (llbra)
IE não roda nativamente SVG por uma razão que tem nome: Silverlight.
Pra quê a Microsoft iria se compatibilizar a rodar coisas que podem
rodar em qualquer lugar, quando podem forçar rodar um troço alienígena
que só rode nas dependências* do seu sistema operacional?
(* - notaram o trocadilho? Notaram?)
Não sei se você sabe, mas o pessoal do Mono fez um projeto chamado
Moonlight, que é um Silverlight que roda no Linux.
> E mesmo que façam
> uma versão para "browsers com SVG" e outra para o IE, as pessoas
> vão querer acessar o site com SVG e vão debandar do IE.... Pensando bem,
> é uma boa que o IE não inclua.... :P
Ai que está. O que fará estas pessoas adotarem o SVG. O simples fato
dele existir? Tem que haver conteúdo. Antes disto, é só conversa de
nerd.
Impressionantemente algumas coisas que parecem que vão dar errado dão
certo e vice-versa. Espero que com o seu uso, o SVG possa ser adotado
e cair no gosto do povo.
--
Lucas Arruda
lucasarruda.com
Irapuan Martinez
> Não sei se você sabe, mas o pessoal do Mono fez um projeto chamado
> Moonlight, que é um Silverlight que roda no Linux.
O pessoal da Microsoft não chegou aonde chegou sendo bonzinhos e
doando idéias a comunidade. Na verdade, eles torcem para o open source
os copiem, para os munir de argumentos a respeito de patentes de
software.
Coisa boa criarem uma versão open source. Mas se a questão de licença
pegar, a parada aberta não vai ter aonde rodar.
> Impressionantemente algumas coisas que parecem que vão dar errado dão
> certo e vice-versa. Espero que com o seu uso, o SVG possa ser adotado
> e cair no gosto do povo.
SVG está no radar desde 2000 - quando ainda era chamado de VML.
Lucas Arruda (llbra)
Coisa boa criarem uma versão open source. Mas se a questão de licença
pegar, a parada aberta não vai ter aonde rodar.
Na verdade existe uma dualidade aqui. É bom e ruim ao mesmo tempo.
Bom porque quem tem aplicação em Silverlight não fica preso no Windows,
pode migrar para o Moonlight. Mas ao mesmo tempo isso fortalece o nome
do projeto, e o inverso também pode acontecer. Se essa plataforma for
muito usada, acaba sendo mais vantagem para o lado Linux.
No quesito licença, pelo que eu sei a Engenharia Reversa é permitida
até certo ponto. E, é claro, há um interesse da Microsoft também.
SVG está no radar desde 2000 - quando ainda era chamado de VML.
O Linux está ai desde 1991. A idéia foi amadurecendo e sendo adotada
com o tempo. Até hoje vemos que a adoção dele não é grande se comparada
com o Windows, mas tem grande significância, principalmente quando
falamos de servidores, aplicações de risco e até celulares (embarcados).
Então, as vezes sendo adotados por uns, ele acaba sendo usufruído.
Como acho que o caso do SVG é mais simples, acho que ele tende
a ser adotado mais facilmente (o que não quer dizer que isso possa
demorar).
--
Lucas Arruda
lucasarruda.com