Elección de SVG o CSS3 para degradados

Me gustaría utilizar degradados en gran medida en un nuevo sitio web en el que estoy trabajando. Me he estado preguntando si sería mejor implementar los degradados en CSS3 o SVG.Elección de SVG o CSS3 para degradados

Normalmente, solo necesito gradientes lineales de varias paradas para que ambos satisfagan mis necesidades allí.

Inicialmente asumí que esto se hizo mejor en CSS3, pero empecé a cuestionar mi decisión y agradecería otras opiniones.

Mi pensamiento hasta ahora es que SVG (como un fondo CSS) puede ser mejor porque:

Funciona en IE9
Mi CSS es más limpio w/o navegador prefijos
Fácil reutilización de gradiente

CSS3 puede ser mejor porque:

parece como un trabajo para CSS
Menos descargas para el cliente Todo
es en un solo lugar

Una consideración importante que no sé la respuesta a es el que tiene un mejor rendimiento?

¿Existe una mejor práctica para implementar degradados de fondo?

Fuente

2012-02-12 C.J.

Según una prueba realizada por Lea Verou (I confiar en su trabajo), gradientes CSS son más rápidos: http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

ACTUALIZACIÓN:

también podría considerar el uso Modernizr para servir a SVG I E9 que admite fondos SVG pero no admite gradientes CSS.

En el CSS que sólo haría:

.cssgradients #someElement { /* Gradient background rule. */ } 
.no-cssgradients #someElement { /* SVG background rule. */ }

Más información aquí:

http://modernizr.com

Fuente

2012-02-12 09:15:39

No haga sus elecciones de diseño basadas en hacer que IE sea feliz. Use la mejora progresiva/soporte graduado del navegador y presione IE al final de su lista de soporte.

Elija CSS3: su sitio web aparecerá sin gradientes en IE, lo que probablemente sea un compromiso aceptable.

Fuente

2012-02-12 09:03:43

Debe usar http://www.colorzilla.com/gradient-editor/ para generar CSS y SVG (para IE9) ambos.

Ejemplo:

background: #fefcea; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWRhMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */ 
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0); /* IE6-8 */

Se genera automáticamente IE9 código SVG

apoyo a la plena gradientes multi-parada con IE9 (usando SVG). Añadir una clase "degradado" a todos sus elementos que tienen un gradiente, y añadir la siguiente anulación para el código HTML para completar el apoyo IE9:

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]-->

Fuente

2012-02-12 09:04:34

Esto realmente no responde la pregunta que hace el OP. Es genial que uno sea capaz de admitir ambos con un código mínimo, pero el OP está pidiendo ventajas y desventajas. La única forma en que esta respuesta tiene sentido es si se prefija con _ "ambos degradados son completamente equivalentes en todos los sentidos; diferentes navegadores solo admiten diferentes tipos de degradado "_, lo que no sería una declaración objetiva. –

me han elegido para poner en práctica mis gradientes lineales en SVG como puedo hacerlo una vez, Por supuesto, solo apoyo navegadores modernos.

Este es el SVG, solo necesito describirlo una vez. No estoy seguro de si hay una forma de definir las coordenadas x1y1 y x2 y2 usando css. feliz de ser probado equivocado.

Así que si CSS no puede implementar un degradado con coordenadas x1y1 x2y2, supongo que esto es una ventaja de usar svg gradientes lineales.

El siguiente código se puede tomar directamente de inkscape.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 200 200"> 

    <defs> 
     <linearGradient id="grad1" x1="26.3" y1="0.2" x2="26.5" y2="3.9" gradientUnits="userSpaceOnUse"> 
     <stop offset="0" style="stop-color:#0284a4;stop-opacity:0.9" /> 
     <stop offset="1" style="stop-color:#0284a5;stop-opacity:1" /> 
     </linearGradient> 
    </defs> 
    <path id="skylevel10" fill="url(#grad1)" d="m 0 -0 201 0 0 6.7 c 0 0 -29.8 1.2 Z"/> 
</svg>

Fuente

2014-11-17 19:56:19

Elección de SVG o CSS3 para degradados

Respuesta

Cuestiones relacionadas