Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 30
Подскажите, зачем необходимо защищать логотип watermark-ом? Многие компании предоставляют логотипы в векторном виде для упрощения поиска логотипа другим людям, у которых есть необходимость использовать логотип в рекламных компаниях с участием данной организации, например.
И хотелось бы узнать, какой из способов вставки наиболее корректный? Я имею ввиду, с точки зрения валидности / кроссбраузерности / правильности.
Есть так же способ отрисовки векторного изображения JS скриптом.
И хотелось бы узнать, какой из способов вставки наиболее корректный? Я имею ввиду, с точки зрения валидности / кроссбраузерности / правильности.
Есть так же способ отрисовки векторного изображения JS скриптом.
Смотря что вам нужно делать с 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.
Насчет кроссбраузерности — лично я делаю png фолбек для ie < 9 по средствам modernizr, js определения (если не хочу тянуть modernizr) или css хака с \9.
Понятное дело, лучше максимально просто делать, как насчет вставки тега IMG внутрь контейнера OBJECT. Теоретически, если формат не поддерживается — будет отображено содержимое контейнера?
По поводу корректности. Какой из способов максимально корректный: IMG, EMBED или OBJECT? И есть ли вообще различия? Подразумеваю, что происходит «под капотом» — какой из способов наиболее производительный?
По поводу корректности. Какой из способов максимально корректный: IMG, EMBED или OBJECT? И есть ли вообще различия? Подразумеваю, что происходит «под капотом» — какой из способов наиболее производительный?
Хорошие вопросы!
1) Если формат SVG не поддерживается, то никакой способ не подойдет. Я как раз про это и пишу.
2) Все три способа корректны и валидны. Следующим этапом я хочу оттестировать Wallaby — адобовский конвертер из флеша в SVG и посмотрим, что будет там. Сможем ли мы интерактивный SVG показывать простым тегом IMG — самой интересно.
3) По логике вещей, производительность должна быть за IMG. Но этот забавный глюк в файрфоксе… установить бы истинную причину…
1) Если формат SVG не поддерживается, то никакой способ не подойдет. Я как раз про это и пишу.
2) Все три способа корректны и валидны. Следующим этапом я хочу оттестировать Wallaby — адобовский конвертер из флеша в SVG и посмотрим, что будет там. Сможем ли мы интерактивный SVG показывать простым тегом IMG — самой интересно.
3) По логике вещей, производительность должна быть за IMG. Но этот забавный глюк в файрфоксе… установить бы истинную причину…
По поводу IMG в OBJECT, я имел ввиду, что специфика контейнера OBJECT, как написано в статье, заключается в том, что если SVG не поддерживается — отображается надпись «Альтернативный текст: Ваш браузер не поддерживает формат SVG», но OBJECT позволяет вместо данной надписи использовать картинку IMG. То есть, если браузер не поддерживает SVG — отобразится вместо альтернативного текста картинка, например PNG.
Если это возможно, то это, с моей точки зрения, самый простой и логичный способ кроссбраузерного отображения SVG.
Возможности протестировать нет — linux и отсутствие подходящего браузера.
Если это возможно, то это, с моей точки зрения, самый простой и логичный способ кроссбраузерного отображения SVG.
Возможности протестировать нет — linux и отсутствие подходящего браузера.
В статье написано некорректно, каюсь. Такой альтернативный текст будет в том случае, если не поддерживается сам тег OBJECT, то есть в IE.
Мне кажется самой простой вот такая конструкция:
То есть, во всех браузерах кроме IE<9, будет SVG
Мне кажется самой простой вот такая конструкция:
<!--[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
2) Древние эксперименты с разными методами вставки svg.
3) С чего вы взяли? Производительность должна быть одинаковая, рендер проводится браузером. Другое дело — количество запросов. Поэтому для меня оптимальный способ inline svg или base64 в стилях.
Глюк в ff воспроизводить нет времени, но можете попробовать назначить viewBox или изменить shape-rendering.
3) С чего вы взяли? Производительность должна быть одинаковая, рендер проводится браузером. Другое дело — количество запросов. Поэтому для меня оптимальный способ inline svg или base64 в стилях.
Глюк в ff воспроизводить нет времени, но можете попробовать назначить viewBox или изменить shape-rendering.
А вас не расстраивает необходимость для какой-то там просто картинки городить весь этот огород? Как бы ни были законны и валидны все эти способы, мне хочется, чтобы для клиента это был просто IMG — со всеми вытекающими. Потому что это просто статическая картинка! То есть, по правой кнопке мы можем сохранить картинку, посмотреть ее ширину и высоту и прочее… А все эти библиотеки, модернайзеры, костыли — грустно!
К тому же, весь этот сопутствующий код придется тоже сохранять, если мы хотим реализовывать Local Storage
К тому же, весь этот сопутствующий код придется тоже сохранять, если мы хотим реализовывать Local Storage
Вы понимаете, что эти костыли сделаны для браузеров не поддерживающих svg? У вас, к примеру, ie8 вообще ничего не отобразит. Все эти костыли строятся автоматически — мне не сложно.
Клиенту не важно что это img, inline svg или object — ему важно отображение.
Что сохранять? Какой LocalStorage? Я вас не понимаю :)
Клиенту не важно что это img, inline svg или object — ему важно отображение.
Что сохранять? Какой LocalStorage? Я вас не понимаю :)
Да, я как раз понимаю. Про ИЕ8 мы знаем. Но очень скоро мы про него вообще забудем. И костыли не понадобятся.
А как вы автоматически этим пользуетесь?
Клиенты разные бывают — поисковики, например. Сейчас в поисковики не попадают ембеды и обжекты — только картинки.
Local Storage — книга по ссылке внизу, 134 страница, 7 глава.
Главный вопрос, который меня мучал и мучает — «почему так сложно» вебмастерам с этим новым типом картинок. Все ведь на самом деле просто и должно быть вообще элементарно — как тег IMG
А как вы автоматически этим пользуетесь?
Клиенты разные бывают — поисковики, например. Сейчас в поисковики не попадают ембеды и обжекты — только картинки.
Local Storage — книга по ссылке внизу, 134 страница, 7 глава.
Главный вопрос, который меня мучал и мучает — «почему так сложно» вебмастерам с этим новым типом картинок. Все ведь на самом деле просто и должно быть вообще элементарно — как тег IMG
Простейший sass mixin выдает мне png для старья, которые автоматически сконверчены из svg по средствам ImageMagick.
Я прекрасно знаю, что такое Local Storage, а вот вы похоже не совсем… или я вас не правильно понимаю. Что вы хотите сохранять с его помощью, причему тут svg, а тем более js скрипты для его поддержки в старых браузерах?
«Сейчас в поисковики не попадают ембеды и обжекты — только картинки.»
Апрув или не было :) Google индексирует svg с 2010 года во всех его проявлениях.
Так и не увидел особых сложностей в вашем посте. Если у вас сервер отдает неправильные mime-type, то это проблема сервера, а не svg формата. Ну а фолбек для старых браузеров всегда был и будет, это обратная сторона быстрого развития технологий, стоит давно привыкнуть.
Я прекрасно знаю, что такое Local Storage, а вот вы похоже не совсем… или я вас не правильно понимаю. Что вы хотите сохранять с его помощью, причему тут svg, а тем более js скрипты для его поддержки в старых браузерах?
«Сейчас в поисковики не попадают ембеды и обжекты — только картинки.»
Апрув или не было :) Google индексирует svg с 2010 года во всех его проявлениях.
Так и не увидел особых сложностей в вашем посте. Если у вас сервер отдает неправильные mime-type, то это проблема сервера, а не svg формата. Ну а фолбек для старых браузеров всегда был и будет, это обратная сторона быстрого развития технологий, стоит давно привыкнуть.
Мда, вы правы.
Про Local Storage я действительно, кажется, грубо ошиблась.
Про индексацию гуглом SVG нашла из официальной информации только это: googlewebmastercentral.blogspot.ru/2010/08/google-now-indexes-svg.html. Да, разумно предположить, что они могут индексировать и из embed — ведь показывают в выдаче все равно не svg… да?
И все равно, меня расстраивает тот факт, что нужно ради этого еще какие-то библиотеки подключать
Про Local Storage я действительно, кажется, грубо ошиблась.
Про индексацию гуглом SVG нашла из официальной информации только это: googlewebmastercentral.blogspot.ru/2010/08/google-now-indexes-svg.html. Да, разумно предположить, что они могут индексировать и из embed — ведь показывают в выдаче все равно не svg… да?
И все равно, меня расстраивает тот факт, что нужно ради этого еще какие-то библиотеки подключать
Я просто хотела заострить на этом внимание. Понятно, что незачем. Гипотетически может быть такая ситуация: допустим, вы размещаете каталог план-схем помещений и обычно для этого использовали экспорт в .gif с полупрозрачностью, какие-то профили jpeg или png с watermarks, то тут это не пройдет. Да, пользователь отлично зазумит в подробностях схему помещения и порадуется отсутствию наложенных пикселей, а кто-то сможет спокойно украсть вашу схему и перепродать предложение.
ИМХО, для таких случаев должно рано или поздно должно возникнуть какое-то решение, позволяющее защищать картинки.
ИМХО, для таких случаев должно рано или поздно должно возникнуть какое-то решение, позволяющее защищать картинки.
Вспомните, что происходит со ВСЕМИ попытками защиты информации от копирования. Для того, чтобы броузер что-либо отрендерил, нужно, чтобы он это сперва скачал, в полном объёме. То бишь копирование уже случилось в момент показа контента. С этим не надо никак бороться. Растровые картинки ведь тоже можно злобно украсть, посредством хакерской технологии «правый клик», и ничего как-то, все живут. Кроме того, есть и ещё один векторный формат, довольно популярный в интернетах, PDF называется, и вот тоже как-то ничего вроде, используют и не жалуются.
Потуги «защиты» такого рода приносят лишь вред, так как 1) вызывают презрительное отношение 2) не работают никогда, по определению не могут. Единственный способ скрыть сорс — распечатать ваш SVG на бумаге, желательно не в очень высоком разрешении.
Потуги «защиты» такого рода приносят лишь вред, так как 1) вызывают презрительное отношение 2) не работают никогда, по определению не могут. Единственный способ скрыть сорс — распечатать ваш SVG на бумаге, желательно не в очень высоком разрешении.
У PDF есть защита. Да, ее можно сломать. Но сам факт ее наличия говорит о том, что пдф мы можем пометить как read only, «только для ознакомления».
Водяные знаки убрать с обычных картинок — бывает вообще задача не из простых.
Что, если я захочу «пометить» картинку? Я, конечно, могу написать что-нибудь этакое очень-очень-очень мелко или усложнить объект так, чтобы только при открытии в векторном редакторе это было заметно — черным по черному. Например oss.spb.ru/oss.nsf/test_safe.svg — в нижнем правом углу написанo donnaAnna. В браузере этого не видно, а в редакторе — пожалуйста.
Водяные знаки убрать с обычных картинок — бывает вообще задача не из простых.
Что, если я захочу «пометить» картинку? Я, конечно, могу написать что-нибудь этакое очень-очень-очень мелко или усложнить объект так, чтобы только при открытии в векторном редакторе это было заметно — черным по черному. Например oss.spb.ru/oss.nsf/test_safe.svg — в нижнем правом углу написанo donnaAnna. В браузере этого не видно, а в редакторе — пожалуйста.
Вы знаете далеко не многие компании предоставляют векторный логотип. Возможно это косяки менеджеров, которые не в курсе есть ли у них логотип. Зачастую присылают растровую версию плохого качества, или вообще говорят возьмите с сайта и всё бы хорошо, но на сайте векторный логотип выкладывают вообще единицы. А векторный логотип в шапке сайта мог бы вполне помочь сберечь время на отрисовку.
В «особенных» случаях даже при наличии брендбука, некоторые менеджеры отказываются его высылать под предлогом «корпоративная тайна». Если бы еще студии выкладывали логотипы и брендбуки, которые они делали, было бы тоже здорово и облегчило бы многим работу.
В «особенных» случаях даже при наличии брендбука, некоторые менеджеры отказываются его высылать под предлогом «корпоративная тайна». Если бы еще студии выкладывали логотипы и брендбуки, которые они делали, было бы тоже здорово и облегчило бы многим работу.
В комментариях помечу, что если у кого нет денег на CorelDRAW, то можно невозбранно пользоваться Inkscape для рисования SVG.
Да, спасибо за уточнение. Я забыла написать, что вообще любой векторный редактор подойдет.
кстати, вот www.linux.org.ru/forum/talks/3740097 пишут, что Inkspace делает не совсем корректный viewbox для SVG. Нарочно заглянула посмотреть, указывает ли viewbox Corel — да, указывает.
Если еще ручками залезть в исходники 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
11кб github.com/rithis/rithis.com/blob/master/public/images/slogan.svg
27кб github.com/rithis/rithis.com/blob/master/public/images/slogan.png
… картинку такого размера, как наш рабочий лист...
Точно не перевод?
Более «чистый» SVG у меня получается в Inkscape, по крайней мере в Blender-e его могу сразу открыть и на сайт вставляю без перенастроек. (Как пример, делал себе заставку — filenko.ru)
Дополнительный плюс SVG — возможность создания гиперссылки для каждого графического элемента внутри одного файла!
А по поводу авторского права мысль такова: если ваше изображение сильно будет кому то нужно, то они его смогут и сами отрисовать хоть из растра. Растр не дает гарантии невоспроизводимости изображения в более высоком качестве. Приходилось воссоздавать логотипы в векторе из изображений переданных заказчиком по факсу — для многих дизайнеров это дело привычное.
Дополнительный плюс SVG — возможность создания гиперссылки для каждого графического элемента внутри одного файла!
А по поводу авторского права мысль такова: если ваше изображение сильно будет кому то нужно, то они его смогут и сами отрисовать хоть из растра. Растр не дает гарантии невоспроизводимости изображения в более высоком качестве. Приходилось воссоздавать логотипы в векторе из изображений переданных заказчиком по факсу — для многих дизайнеров это дело привычное.
Решила подвести промежуточный итог
1) Конфигурирование сервера для правильной работы с SVG jwatt.org/svg/authoring/#server-configuration
2) Как проверить, правильно ли сервер отдает SVG
web-sniffer.net/ в строку адреса введите адрес одного из ваших svg файлов
Cмотрите на правильность HTTP response headers
Должно отдаваться
Либо, для gzipped SVG, сервера должны отдавать:
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
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 за наводку!
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: gzip3) Как 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 за наводку!
Для тех, кто использует modernizr.js, eсть еще вариант использования SVG с откатами для браузеров с выключенным JavaScript и без поддержки SVG
HTML:
JS
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="">');
}
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу