¿Navegadores para svg y css?

cyber_dark · #1 (**permalink**) 08/07/2012, 15:19

Estaba leyendo sobre optimizar las esquinas redondas en todos los navegadores y de un blog llegue a la pag http://a.deveria.com/roundgen/ en el blog decia que se ve veia en todos los navegadores, encontre duda en la parte:

Código:

background: #666 url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjNjY2IiByeD0iMTAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);

Leyendo encontre que lo que hace es hacer graficos con svg lo cual da el efecto de redondeo, pero leyendo mas encontre que el svg solo funciona aparte de ie9, pero la forma en que lo declaran es diferente, mi duda es al ponerlo asi en el css hace que sea visible en todos los navegadores?

furoya · #2 (**permalink**) 08/07/2012, 18:01

No sé qué pasará con IE9. Justamente ese navegador no aceptaba las imágenes (ni de fondo ni en el <img src=>) usando ese método.
Porque lo que estás metiendo es una imagen con la forma de rectángulo de esquinas redondeadas.
La técnica es muy vieja. La usaba (justamente!) IE4 antes de que existiera el border-radius. Que, por otro lado, es mucho mejor como método.

Seguramente pruebas el SVG porque estás haciendo experimentos.
En Firefox, Opera y Chrome ya anda (SVG y base64). Pero —repito— también anda el border-radius. Quizá en alguno, con prefijo; pero anda.

Te dejo un tema (adentro hay algún link más) donde se discutió sobre esa forma de embutir imágenes en el HTML en vez de llamar a un archivo.

Necesito ayuda urgente!!!!!!!
(Sí, ya sé, el título es lamentable, pero ya sabemos que los buscadores se nefregan en los títulos

)

cyber_dark · #3 (**permalink**) 08/07/2012, 19:34

Gracias por responder, si yo se que el border-radius ya funciona, de hecho lo uso, solo estoy tratando de que en navegadores viejos tambien se logre el efecto, dices que desde ie4 funciona, sin embargo en el link que me pasaste el ultimo usuario decia que en ie6 aun habian problemas, tu ya lo has usado? y como exactamente?, tambien ese usuario menciona algo de una extencion mth que segun funciona en ie, la conoces o la has usado? Saludos.

furoya · #4 (**permalink**) 08/07/2012, 20:26

Extensiones no usé. Lo que hacen es tomar esos valores del CSS para hacer las esquinas, y pasarlos al VML usando JScript, que es un lenguaje propietario de MS.

Pero es algo que puede hacer uno a mano en su documento. Así que tiene poco sentido.

Lo de poner una imagen "redondeada" de fondo es más o menos parecido (y con las mismas limitaciones) que poner un VML detrás del texto, para que parezca un fondo.

Ya no vas a encontrar un IE4, pero esto anda en IE6

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<style>v\: * { behavior:url(#default#VML); display:inline-block }</style> 

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /> 
</head>
<body>

<div style="position: relative; width: 300px; height: 120px; padding: 15px 0; font: bold 22px/120% fantasy; text-align: center; ">

<v:roundrect style="width:300px; height:120px; position:absolute; top:0; left: 0; z-index:-1; " fillcolor="red" arcsize="0.3" strokecolor="black" strokeweight="2px"/>

FOROS<br> DEL<br> WEB

</div>

</body>
</html>

Hay más (aunque no demasiada) información en el Foro sobre lenguajes gráficos vectoriales.
También está la etiqueta canvas, por si quieres experimentar con ella.

cyber_dark · #5 (**permalink**) 08/07/2012, 20:52

Gracias por responder, el codigo que me pasaste es posible ponerlo en un background en el css? sobre lo del canvas me parece que es de html5 no? y por cierto esto funciona bien en todos los navegadores o solo en la familia de ie

furoya · #6 (**permalink**) 09/07/2012, 10:00

No. Es otro método. Con VML ("Vector Markup Language") generas puntos en el navegador, pero no es una imagen que CSS pueda manejar. En SVG ("Scalable Vector Graphics") sí lo hicieron, y una vez rendereado se comporta como imagen. Combinándola con la capacidad de interpretar base64 de algunos navegadores, se puede simular unas esquinas redondeadas sin usar imágenes ... externas.

Con VML se pueden crear sólo las esquinas redondas, que se superponen a las de 90° usando CSS; o se toma la medida de la caja ya cargada con javascript o JScript y se genera todo el roundrect para ponerlo detrás, como en el ejemplo que te dejé arriba.
Que es para IE. Está porque preguntaste cómo lo hacían los de Microsoft antes del CSS3.

Y canvas ya funciona en todos los navegadores, menos IE anteriores al 9.
Hay montones de ejemplos teóricos y prácticos en estos foros.

Para VML puedes poner en gugl

site:www.forosdelweb.com "vml"

vml con html (xml). codigo raro.

Que lenguaje es este codigo??

esquinas redondeadas no funciona en explorer 8, 7

[Nota: en alguno de esos temas menciono que las coordenadas son en pixeles. En realidad se puede (y en muchos ejemplos está así) usar una relación de tamaño que sirve de referencia para los puntos de la imagen, por lo que sí puede que estén escritos como "decimales", ya que entonces usa una unidad creada para el caso.]

Sobre canvas vas a encontrar demasiado

site:www.forosdelweb.com "canvas"

así que no te hago una selección de enlaces.

cyber_dark · #7 (**permalink**) 09/07/2012, 14:46

Muchas gracias por la ayuda, entonces a diferencia del svg que puede poner desde el css, el vml no se puede no es asi? Aun que el codigo no es muy largo por lo general me gusta que sea estetico, seria posible poner algo asi:

<div id="redondo">

</div>

Y con el js hacer que el div tome el comportamiento de

<v:roundrect>

La otra idea y que ya estoy haciendo es que compruebe que version de ie y apartir de eso que cree <v:roundrect> antes del <div id="redondo"> y despues </div>. Como dije solo lo hago por cuestion de estetica, agradezco tu ayuda saludos!.

furoya · #8 (**permalink**) 09/07/2012, 15:35

Como VML es código válido, se puede poner oculto en el div con esquinas redondas.
Pero la técnica es justamente la última que comentaste : con JS se lee si el navegador soporta border-radius y si no lo hace (porque es un IE viejo, seguro) el mismo escript captura las medidas del div, se las pasa al v:roundrect y lo hace visible.

Si vas a trabajar sobre eso, no sé cuánto conocimiento tienes de JS, pero es fácil.

Busca sobre getElementById , offsetHeight , offsetWidth.

Si tienes algo hecho lo vemos acá.

furoya · #9 (**permalink**) 15/07/2012, 08:46

Ups...

En el ejemplo anterior me olvidé de IE8, que tiene algún cambio en la sintaxis.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<style type="text/css">
div {
position: relative; 
width: 300px; 
height: 120px; 
padding: 15px 0; 
font: bold 22px/120% fantasy; 
text-align: center; 
background-color:red; 
color: black; 
-webkit-border-radius: 30px; 
-moz-border-radius: 30px; 
-ms-border-radius: 30px; 
-o-border-radius: 30px; 
border-radius: 30px; 
}

</style> 

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /> 

<?import namespace="v" implementation="#default#VML" ?> 

</head>
<body>

<div>
FOROS<br> DEL<br> WEB.

<v:roundrect style="width:300px; height:120px; position:absolute; top:0; left: 0; z-index:-1; " fillcolor="red" arcsize="0.3" strokecolor="red" strokeweight="2px"/>
</div>

<!--[if lt IE 9.0000]> 
<style type="text/css">
div { background-color: transparent; } 
</style>
<![endif]-->

</body>
</html>

No sé si IE9 reconoce al fin las esquinas redondas, si no lo hace, habrá que cambiar el CC.

Todavía no lo probé en 7 y 6, supongo que seguirán funcionando.

emprear · #10 (**permalink**) 15/07/2012, 10:44

Título del post
¿Navegadores para svg y css?
???
svg, lo soportan en forma nativa todas las ultimás versiones
css, todos, (bueno, al menos lo que soporten)

Contenido del post:
optimizar las esquinas redondas en todos los navegadores
más ?????

si, border-radius (creo que ya ningún browser en su última versión necesita de prefijos propietarios.

para IE9-
http://css3pie.com/

furoya · #11 (**permalink**) 15/07/2012, 12:12

Quizá el planteo del título no era claro, yo lo entendí después de mirar el tema.
Quería meter el svg como fondo con el método CSS de url(data), pero con una imagen svg creada con base 64.

No sé si eso anda en IE. Me parece que no.

Y la buena idea de cyber_dark es justamente no tener que traer un "/PIE.htc" sino escribirlo él mismo, porque no es tan complicado.
Es un buen proyecto.

Vamos a ver cómo anda cuando regrese.

emprear · #12 (**permalink**) 15/07/2012, 12:58

Como poder se puede
http://foros.emprear.com/svg/dibujox.svg
( hay que definirle el xmlns:xlink="http://www.w3.org/1999/xlink" )
En IE<9, no estoy seguro, ya que hace falta el plugin de Adobe y las herramientas de desarrollo de IE9 no dan como para que se fuerce la descarga del plugin (pero debería funcionar supongo)
Y convengamos que Pie Css, no es tan pesado y da funcionalidad a otras varias propiedades de css, no solo border-radius

Saludos

furoya · #13 (**permalink**) 15/07/2012, 13:28

¡No puedo abriir laa páaaaagiiinaaa!

¿Seguro anda

Código:

background: #666 url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjNjY2IiByeD0iMTAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);

???

Nunca miré ese *.htc. Pero es una buena idea practicar haciendo uno propio.
Si los de Pie están bien hechos, se los puede desarmar para usar de ejemplo, y si es para una página industrial, se linkean. ¿Por qué no?.

emprear · #14 (**permalink**) 15/07/2012, 13:35

Uy, que nabo, puse la url de mi localhost
es aqui
http://foros.emprear.com/svg/dibujox.svg

Saludos

PD: edito arriba también