Каковы недостатки использования SVG с точки зрения проверки, доступности и удобства обслуживания для веб-сайтов на основе CMS? - PullRequest
Новая
       5

Каковы недостатки использования SVG с точки зрения проверки, доступности и удобства обслуживания для веб-сайтов на основе CMS?

0 голосов
/ 10 октября 2011

Каковы недостатки использования SVG с точки зрения проверки, доступности и удобства обслуживания для веб-сайтов на основе CMS?

В проекте мне нужно сделать масштабируемую навигационную жидкость без потери качества текста и градиента. и это невозможно только с HTML, CSS.

Кнопка, подобная этой:

screenshot of desired button

Итак, я нашел этот пример (хотя это не совсем то, что я хочу).

но это недействительно:

validator screenshot

Эта кнопка была сделана с помощью кода SVG - здесь нет HTML и CSS.

Код SVG: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="button_surface" gradientUnits="objectBoundingBox"
      x1="1" x2="1" y1="0" y2="1">
      <stop stop-color="#434343" offset="0"/>
      <stop stop-color="#000000" offset="0.67"/>
    </linearGradient>

    <linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
      x1="0" x2="0" y1="0" y2="1">
      <stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
      <stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
    </linearGradient>
  </defs>

  <!-- button content -->
  <rect x="10" y="10" rx="15" ry="15" width="150" height="80"
    fill="url(#button_surface)" stroke="#363636"/>

  <text x="30" y="55" fill="white"
    font-family="Tahoma" font-size="20" font-weight="500">
    SVG Button
  </text>

  <!-- vitual lighting effect -->
  <rect x="12" y="12" rx="15" ry="15" width="146" height="76"
    fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/>
</svg>

Мой вопрос возник, потому что этот сайт будет создан с использованием WordPress. Каковы недостатки использования кода SVG над HTML, CSS и JavaScript?

Редактировать: Я нашел эту статью на веб-сайте Microsoft, где говорится, что SVG лучше, чем Canvas, создавать элементы интерфейса из-за меньшего количества кода интерфейса.

1 Ответ

2 голосов
/ 10 октября 2011

Самая большая проблема, с которой вы столкнетесь, - это совместимость браузера.Если вам требуется поддержка более старых версий IE (а большинству общедоступных веб-сайтов потребуется), вы не сможете использовать SVG без использования хаков Javascript, поскольку браузер его не поддерживает.

Кроме того, SVGне поддерживается в браузере Android до версии 3.0, которая в настоящее время учитывает практически все мобильные телефоны Android, за исключением нескольких планшетов.Если вам нужно их поддерживать, то опять-таки SVG не является решением.

Если вы согласны не поддерживать эти браузеры (или если вы можете разработать запасное решение), тогда сделайте это.

С точки зрения удобства обслуживания, я рекомендую создать вашу кнопку с помощью векторного графического редактора, который можно экспортировать в SVG.Будет намного проще поддерживать, если у вас есть исходный файл, который вы можете редактировать в графической среде, чем если вы пытаетесь редактировать SVG-разметку напрямую.

С точки зрения проверки, причина, по которой выполучать ошибки из-за того, как вы встраиваете SVG в ваш HTML.Не следует определять заголовок XML для SVG, когда он внедрен таким образом, поскольку заголовок XML должен всегда отображаться только в качестве первой строки документа XML.

Если весь документ является XML (т. Е.xhtml), тогда вам нужно поместить определения пространства имен для xhtml и SVG вверху документа.Если документ не является XML (то есть простым HTML), тогда вам вообще не нужно объявление XML.

Следующее будет работать во всех браузерах, поддерживающих встроенный SVG: 

<html>
  <head>...</head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      ....svg content here....
    </svg>
  </body>
</html>

Это должно решить ваши проблемы с проверкой.

Если SVG должен быть загружен из внешнего файла, то он должен включать декларацию XML.

...