Пользователь
0,0
рейтинг
25 февраля 2013 в 10:00

Разработка → Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу из песочницы tutorial

Рисуем логотип
20-летнему юбилею тега IMG посвящается
25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .


Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG

Зачем мне картинка в SVG?


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

Настройки в Corel Draw!
По умолчанию экспорт из Corel Draw! в SVG формат даже при галочке «Только выделенные объекты» дает в результате картинку такого размера, как наш рабочий лист. То есть картинка будет на A4, если рабочий лист такого формата. Приходится делать отдельный лист точно такого размера в пикселах, какой нам нужен, делать наш логотип именно такого размера, центровать, а потом уже экспортировать.
Экспорт из Corel в SVG

А теперь вставляем на страницу


При вставке на страницу тега
<img src="logo.svg" alt="Векторный логотип" border=”0”>
мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG —
<embed src="logo.svg" type="image/svg+xml" width="391" height="50" />
— показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега
<object type="image/svg+xml" data="logo_oss.svg">Альтернативный текст: Ваш браузер не поддерживает формат SVG</object>
Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.

MIME-Type


Настройка MIME-Type
Оказывается, дело в том, что мой сервер (IBM Lotus Domino) не умеет корректно отдавать MIME-Type для SVG. И файл, лежащий в File Resources базы, не может быть корректно отдан! Прописываю строчку image/svg+xml в свойствах ресурса. И, о чудо! – все браузеры (кроме IE8) показывают все три варианта (img, embed, object) вставки картинки. Отлично, это меня устраивает, «костыли» для IE будут в gif. Еще раз удивляюсь тому факту, что даже без mime-type на планшетах все показывалось правильно.

Взглянем на логотип поближе


SVG при увеличении
А теперь я пробую увеличить масштаб страницы, чтобы посмотреть на свой логотип, а, точнее, сравнить, как отображается один и тот же файл, вставленный тремя разными тегами. Оказывается, при увеличении масштаба страницы в Firefox, контур того варианта, который был вставлен тегом IMG, то расплывается, то снова становится четким.

А как насчет защиты от несанкционированного копирования и воспроизведения?


Я не претендую на звание специалиста в этой области, наоборот, хотела бы задать вопрос. Просто не нашла ничьего мнения по данному вопросу. У SVG формата нет watermarks, равно как и других защитных атрибутов.
Обычно фирмы владеют файлами в векторах как исходниками. Делая брендбук, дизайн-студии отдают вектор, а везде используется уже растр.
А SVG, вообще-то, текстовый формат, точнее, XML-ный. И, будучи вставленным в любую программу для паблишинга, он будет воспроизведен без потери качества. Это надо учитывать, т.к. редактировать ваши файлы будет гораздо проще и, возможно, потом будет нечем доказать, что вы являетесь законным правообладателем.

Литература по теме:
Руководство по HTML5 habrahabr.ru/company/piter/blog/162161
Анна Торопова @donnaAnna
карма
3,0
рейтинг 0,0

Самое читаемое Разработка

Комментарии (30)

  • +3
    Подскажите, зачем необходимо защищать логотип watermark-ом? Многие компании предоставляют логотипы в векторном виде для упрощения поиска логотипа другим людям, у которых есть необходимость использовать логотип в рекламных компаниях с участием данной организации, например.

    И хотелось бы узнать, какой из способов вставки наиболее корректный? Я имею ввиду, с точки зрения валидности / кроссбраузерности / правильности.

    Есть так же способ отрисовки векторного изображения JS скриптом.
    • +1
      Смотря что вам нужно делать с svg — если просто вставить, то подойдет css background или img (ff 4+, ie9+). Если нужен какой-то js-интерактив или назначение стилей svg элементам через внешний css, то лучше выбрать inline svg (ie9+, ios5+), object, iframe и embed.
      Насчет кроссбраузерности — лично я делаю png фолбек для ie < 9 по средствам modernizr, js определения (если не хочу тянуть modernizr) или css хака с \9.
      • 0
        Понятное дело, лучше максимально просто делать, как насчет вставки тега IMG внутрь контейнера OBJECT. Теоретически, если формат не поддерживается — будет отображено содержимое контейнера?

        По поводу корректности. Какой из способов максимально корректный: IMG, EMBED или OBJECT? И есть ли вообще различия? Подразумеваю, что происходит «под капотом» — какой из способов наиболее производительный?
        • 0
          Хорошие вопросы!
          1) Если формат SVG не поддерживается, то никакой способ не подойдет. Я как раз про это и пишу.
          2) Все три способа корректны и валидны. Следующим этапом я хочу оттестировать Wallaby — адобовский конвертер из флеша в SVG и посмотрим, что будет там. Сможем ли мы интерактивный SVG показывать простым тегом IMG — самой интересно.
          3) По логике вещей, производительность должна быть за IMG. Но этот забавный глюк в файрфоксе… установить бы истинную причину…
          • 0
            По поводу IMG в OBJECT, я имел ввиду, что специфика контейнера OBJECT, как написано в статье, заключается в том, что если SVG не поддерживается — отображается надпись «Альтернативный текст: Ваш браузер не поддерживает формат SVG», но OBJECT позволяет вместо данной надписи использовать картинку IMG. То есть, если браузер не поддерживает SVG — отобразится вместо альтернативного текста картинка, например PNG.

            Если это возможно, то это, с моей точки зрения, самый простой и логичный способ кроссбраузерного отображения SVG.

            Возможности протестировать нет — linux и отсутствие подходящего браузера.
            • 0
              В статье написано некорректно, каюсь. Такой альтернативный текст будет в том случае, если не поддерживается сам тег OBJECT, то есть в IE.
              Мне кажется самой простой вот такая конструкция:
              <!--[if (lt IE 9)]> <img src="logo.gif" alt="Logo" border=0> <style type="text/css"> .SVGImg {display: none; visibility: hidden;} </style> <![endif]--> <img src="logo.svg" alt="Logo" border=0 class="SVGImg">
              То есть, во всех браузерах кроме IE<9, будет SVG
          • 0
            2) Древние эксперименты с разными методами вставки svg.
            3) С чего вы взяли? Производительность должна быть одинаковая, рендер проводится браузером. Другое дело — количество запросов. Поэтому для меня оптимальный способ inline svg или base64 в стилях.
            Глюк в ff воспроизводить нет времени, но можете попробовать назначить viewBox или изменить shape-rendering.
      • 0
        А вас не расстраивает необходимость для какой-то там просто картинки городить весь этот огород? Как бы ни были законны и валидны все эти способы, мне хочется, чтобы для клиента это был просто IMG — со всеми вытекающими. Потому что это просто статическая картинка! То есть, по правой кнопке мы можем сохранить картинку, посмотреть ее ширину и высоту и прочее… А все эти библиотеки, модернайзеры, костыли — грустно!
        К тому же, весь этот сопутствующий код придется тоже сохранять, если мы хотим реализовывать Local Storage
        • 0
          Вы понимаете, что эти костыли сделаны для браузеров не поддерживающих svg? У вас, к примеру, ie8 вообще ничего не отобразит. Все эти костыли строятся автоматически — мне не сложно.
          Клиенту не важно что это img, inline svg или object — ему важно отображение.
          Что сохранять? Какой LocalStorage? Я вас не понимаю :)
          • –1
            Да, я как раз понимаю. Про ИЕ8 мы знаем. Но очень скоро мы про него вообще забудем. И костыли не понадобятся.
            А как вы автоматически этим пользуетесь?
            Клиенты разные бывают — поисковики, например. Сейчас в поисковики не попадают ембеды и обжекты — только картинки.
            Local Storage — книга по ссылке внизу, 134 страница, 7 глава.
            Главный вопрос, который меня мучал и мучает — «почему так сложно» вебмастерам с этим новым типом картинок. Все ведь на самом деле просто и должно быть вообще элементарно — как тег IMG
            • 0
              Простейший sass mixin выдает мне png для старья, которые автоматически сконверчены из svg по средствам ImageMagick.

              Я прекрасно знаю, что такое Local Storage, а вот вы похоже не совсем… или я вас не правильно понимаю. Что вы хотите сохранять с его помощью, причему тут svg, а тем более js скрипты для его поддержки в старых браузерах?

              «Сейчас в поисковики не попадают ембеды и обжекты — только картинки.»
              Апрув или не было :) Google индексирует svg с 2010 года во всех его проявлениях.

              Так и не увидел особых сложностей в вашем посте. Если у вас сервер отдает неправильные mime-type, то это проблема сервера, а не svg формата. Ну а фолбек для старых браузеров всегда был и будет, это обратная сторона быстрого развития технологий, стоит давно привыкнуть.

              • 0
                Мда, вы правы.
                Про Local Storage я действительно, кажется, грубо ошиблась.
                Про индексацию гуглом SVG нашла из официальной информации только это: googlewebmastercentral.blogspot.ru/2010/08/google-now-indexes-svg.html. Да, разумно предположить, что они могут индексировать и из embed — ведь показывают в выдаче все равно не svg… да?
                И все равно, меня расстраивает тот факт, что нужно ради этого еще какие-то библиотеки подключать
                • 0
                  Леший знает, я все перепутала — не Local Storage, а оффлайновое хранилище. 8 глава.
    • –1
      Я просто хотела заострить на этом внимание. Понятно, что незачем. Гипотетически может быть такая ситуация: допустим, вы размещаете каталог план-схем помещений и обычно для этого использовали экспорт в .gif с полупрозрачностью, какие-то профили jpeg или png с watermarks, то тут это не пройдет. Да, пользователь отлично зазумит в подробностях схему помещения и порадуется отсутствию наложенных пикселей, а кто-то сможет спокойно украсть вашу схему и перепродать предложение.
      ИМХО, для таких случаев должно рано или поздно должно возникнуть какое-то решение, позволяющее защищать картинки.
      • 0
        Вспомните, что происходит со ВСЕМИ попытками защиты информации от копирования. Для того, чтобы броузер что-либо отрендерил, нужно, чтобы он это сперва скачал, в полном объёме. То бишь копирование уже случилось в момент показа контента. С этим не надо никак бороться. Растровые картинки ведь тоже можно злобно украсть, посредством хакерской технологии «правый клик», и ничего как-то, все живут. Кроме того, есть и ещё один векторный формат, довольно популярный в интернетах, PDF называется, и вот тоже как-то ничего вроде, используют и не жалуются.

        Потуги «защиты» такого рода приносят лишь вред, так как 1) вызывают презрительное отношение 2) не работают никогда, по определению не могут. Единственный способ скрыть сорс — распечатать ваш SVG на бумаге, желательно не в очень высоком разрешении.
        • 0
          У PDF есть защита. Да, ее можно сломать. Но сам факт ее наличия говорит о том, что пдф мы можем пометить как read only, «только для ознакомления».
          Водяные знаки убрать с обычных картинок — бывает вообще задача не из простых.
          Что, если я захочу «пометить» картинку? Я, конечно, могу написать что-нибудь этакое очень-очень-очень мелко или усложнить объект так, чтобы только при открытии в векторном редакторе это было заметно — черным по черному. Например oss.spb.ru/oss.nsf/test_safe.svg — в нижнем правом углу написанo donnaAnna. В браузере этого не видно, а в редакторе — пожалуйста.
    • 0
      Вы знаете далеко не многие компании предоставляют векторный логотип. Возможно это косяки менеджеров, которые не в курсе есть ли у них логотип. Зачастую присылают растровую версию плохого качества, или вообще говорят возьмите с сайта и всё бы хорошо, но на сайте векторный логотип выкладывают вообще единицы. А векторный логотип в шапке сайта мог бы вполне помочь сберечь время на отрисовку.

      В «особенных» случаях даже при наличии брендбука, некоторые менеджеры отказываются его высылать под предлогом «корпоративная тайна». Если бы еще студии выкладывали логотипы и брендбуки, которые они делали, было бы тоже здорово и облегчило бы многим работу.
  • +3
    В комментариях помечу, что если у кого нет денег на CorelDRAW, то можно невозбранно пользоваться Inkscape для рисования SVG.
    • 0
      Да, спасибо за уточнение. Я забыла написать, что вообще любой векторный редактор подойдет.
    • 0
      кстати, вот www.linux.org.ru/forum/talks/3740097 пишут, что Inkspace делает не совсем корректный viewbox для SVG. Нарочно заглянула посмотреть, указывает ли viewbox Corel — да, указывает.
  • 0
    Если еще ручками залезть в исходники SVG, то можно не слабо оптимизировать размер картинки:

    11кб github.com/rithis/rithis.com/blob/master/public/images/slogan.svg
    27кб github.com/rithis/rithis.com/blob/master/public/images/slogan.png
    • 0
      А если еще прогнать через svgo от deepsweet, то получаем 10.193 кб из 11.542 кб ;)
      • 0
        Оу, спасибо вам, deepsweet и omfg!
        • +2
          всегда пожалуйста :)
          багрепорты и фичреквесты приветствуются.
  • +1
    … картинку такого размера, как наш рабочий лист...

    Точно не перевод?
    • +1
      Честное слово
  • 0
    Более «чистый» SVG у меня получается в Inkscape, по крайней мере в Blender-e его могу сразу открыть и на сайт вставляю без перенастроек. (Как пример, делал себе заставку — filenko.ru)
    Дополнительный плюс SVG — возможность создания гиперссылки для каждого графического элемента внутри одного файла!
    А по поводу авторского права мысль такова: если ваше изображение сильно будет кому то нужно, то они его смогут и сами отрисовать хоть из растра. Растр не дает гарантии невоспроизводимости изображения в более высоком качестве. Приходилось воссоздавать логотипы в векторе из изображений переданных заказчиком по факсу — для многих дизайнеров это дело привычное.
    • 0
      Да, я и сама много лет этим занималась тоже. Но вы же знаете, что если вам отдают настоящий правильный логотип, то в нем никаких кривостей не возникает ни при масштабировании, ни при передаче цвета. А так — все только приблизительно.
  • 0
    Решила подвести промежуточный итог

    1) Конфигурирование сервера для правильной работы с SVG jwatt.org/svg/authoring/#server-configuration
    2) Как проверить, правильно ли сервер отдает SVG
    web-sniffer.net/ в строку адреса введите адрес одного из ваших svg файлов
    Cмотрите на правильность HTTP response headers
    Должно отдаваться Content-Type: image/svg+xml
    Либо, для gzipped SVG, сервера должны отдавать:
    Content-Type: image/svg+xml Content-Encoding: gzip

    3) Как Mozilla Firefox работает с SVG
    www-archive.mozilla.org/projects/svg/faq.html#choose-a-program
    Как команда Firefox не первый год мучается с исправлением бага — нечетким отображением SVG объектов при масштабировании страницы bugzilla.mozilla.org/show_bug.cgi?id=600207

    4) Общие рекомендации W3C для SVG
    www.w3.org/TR/SVG/render.html

    5) Как посмотреть параметры качества отображаемого SVG
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="200px" height="200px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 200 200">

    www.w3.org/1999/07/06/WD-SVG-19990706/render.html часть 5.2
    'shape-rendering'
    Value: default | optimize-speed | crisp-edges | geometric-precision | inherit
    Initial: false
    Applies to: all elements
    Inherited: yes
    Percentages: N/A
    Media: visual

    6) Тесты, примеры и сравнение вариантов вставки на страницу статических SVG картинок, экспортированных из Incscape и CorelDraw! здесь

    Спасибо юзеру ofmg за наводку!
    • 0
      Для тех, кто использует modernizr.js, eсть еще вариант использования SVG с откатами для браузеров с выключенным JavaScript и без поддержки SVG

      HTML:
      <div id="svg">
         <noscript>
      	 	<img src="logo.png" width="X" height="X" alt="" />
         </noscript>
      </div>
      

      JS
          if (Modernizr.svg){
              $('#svg').html('<img src="logo.svg" width="X" height="X" alt=""/>');       
          } else {
              $('#svg').html('<img src="logo.png" width="X" height="X" alt="">');
          }
      

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.