Выбор SVG или CSS3 для градиентов

Question

Я хотел бы интенсивно использовать градиенты на новом веб-сайте, над которым я работаю.Мне было интересно, будет ли лучше реализовать градиенты в CSS3 или SVG.

Как правило, мне нужны только мультистопные линейные градиенты, так что оба соответствуют моим потребностям.

Сначала я предположил, что это лучше всего сделать в CSS3, но начал подвергать сомнению мое решение и был бы признателен за другие мнения.

До сих пор я думал о том, что SVG (как фон CSS)может быть лучше, потому что:

• Работает в IE9
• Мой CSS чище без префиксов браузера
• Простое повторное использование градиента

CSS3 может быть лучше, потому что:

• Похоже на работу для CSS
• Меньше загрузок для клиента
• Всенаходится в одном месте

Важное соображение, на которое я не знаю, ответ на который, который работает лучше?

Есть ли лучшая практика для реализации фоновых градиентов?

Answer 1

Согласно тесту, выполненному Леа Веру (я доверяю ее работе), CSS-градиенты быстрее: http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

ОБНОВЛЕНИЕ:

Вы также можете рассмотретьиспользуя modernizr для обслуживания SVG в IE9, который поддерживает фоны SVG, но не поддерживает CSS-градиенты.

В вашем CSS вы просто сделаете:

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

Подробнее здесь:

http://modernizr.com

Answer 2

Вы должны использовать http://www.colorzilla.com/gradient-editor/ для генерации CSS и SVG (для IE9).

Пример:

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 */

Он автоматически генерирует svg-код IE9

Поддержка полных мультистопных градиентов с IE9 (с использованием SVG).Добавьте класс «градиент» ко всем вашим элементам, имеющим градиент, и добавьте следующее переопределение в ваш HTML, чтобы завершить поддержку IE9:

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

Answer 3

Не делайте свой выбор дизайна, основанного на том, чтобы сделать IE счастливым.Используйте прогрессивную поддержку / классическую поддержку браузера и переместите IE в конец списка поддержки.

Выберите CSS3: ваш сайт просто появится без градиентов в IE, что, вероятно, является приемлемым компромиссом.

Answer 4

Я решил реализовать свои линейные градиенты в svg, поскольку я могу это сделать один раз, я, конечно, поддерживаю только современные браузеры.

Это SVG, мне нужно описать его только один раз. Я не уверен, есть ли способ определить координаты x1y1 и x2 y2, используя css. рад быть ошибочным.

Так что, если CSS не может реализовать градиент с координатами x1y1 x2y2, я думаю, это преимущество использования линейных градиентов SVG.

следующий код может быть взят прямо из 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>