Логотип svg: Png логотип в SVG? — Хабр Q&A

Вёрстка векторного логотипа с использованием SVG — Наноблог Артёма Сапегина

Задача — сверстать логотип так, чтобы:

— Он был векторным. — Менял цвет при наведении. — Делал это плавно. — Умещался в одном файле. — Работал во всех браузерах (с откатом на PNG в случае необходимости).

Очень просто это можно сделать с помощью SVG-стека. Используя псевдокласс :target в SVG, можно хранить в одном файле несколько картинок. Например, при подключении logo.svg#normal мы увидим обычный логотип, а при подключении logo.svg#hover — подсвеченный.

Но пока подключение таких картинок фоном в CSS работает только в Файрфоксе. Зато через тег object — везде. (Лучше было бы использовать тег img, но это не работет в вебките). А значит мы можем сделать так:

<div>
  <object
    data="logo.svg#normal"
    type="image/svg+xml"
   
  ></object>
  <a href="/">Oleg Breslavtsev</a>
</div>

И вот так:

.logo,
.logo__link,
.logo__image {
  display: block;
  width: 260px;
  height: 48px;
}
.logo {
  position: relative;
}
.logo__link,
.logo__image {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo__link {
  background: url(logo.svg) no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-size: auto;
  opacity: 0;
}
.logo:hover .logo__link {
  opacity: 1;
}
.logo:hover .logo__image {
  opacity: 0;
}
.no-svg .logo__image {
  display: none;
}
.no-svg .logo__link {
  opacity: 1;
  background: url(logo.png);
} 

Теперь у нас только обычный вариант логотипа использует псевдокласс :target, а значит подсвеченный мы можем подключить CSS-фоном. Для старых браузеров используется

PNG, класс no-svg добавляет Modernizr. Теперь остаётся подготовить SVG-файл:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48">
  <g>
    
  </g>
  <style>
    g {
      fill: #c399cc;
    }
    g:target {
      fill: #222;
    }
  </style>
</svg>

Получается вот так:

P. S. Горячо рекомендую статью Вадима Макеева «Непростая простая кнопка», которая и сподвигла меня на эксперименты с логотипом.

Практическое руководство о SVG в вебе

Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG. Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.

Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds. Затем жмём save as и выбираем SVG, и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.

Приёмы для уменьшения размеров файла.

(Смотрите ресурсы по оптимизации)

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

Чтобы добиться наименьшего размера SVG, логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS, так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.

Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool, который поможет удалить точки и при этом оставить общую форму той же.

Предварительная оптимизация

Smart Remove Brush Tool удалил точки

Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).

Точки вне сетки

Выравнивание по сетке

Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG

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

И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
  <IfModule mod_filter.c>
      AddOutputFilterByType DEFLATE "image/svg+xml" \
                                    "text/css" \
                                    "text/html" \
                                    "text/javascript"
                                    ... etc
  </IfModule>
</IfModule> 

---

В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO.

Оригинал: 1,413b

После оптимизации: 409b

В итоге размер файла стал меньше на ~71% (и на ~83% при сжатии)

Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент

<use>, для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.

После оптимизации с использованием <use>: 311b

Размер файла стал меньше на ~78%

Если применить эту технику ко всем файлам SVG, это значительно улучшит ваш сайт.

194 SVG логотипов для разработчиков. — Егор Комаров

Отличный сборник SVG логотипов из области программирования. Очен подойдет тем, кто хочет разместить на своем сайте информацию о технологиях с которыми он работает, или же оформить презентацию, баннер. SVG — прекрасный вариант для этого. Все самые популярные логотипы языков программирования, фреймфорков, технологий, CMS и прочего…

Оригинальный сайт с SVG логотипами: (возможно будет обновляться)

http://gilbarbara.github.io/logos/

Но, я не поленился, и специально для удобства создал архив с этими логотипами, качайте в свою коллекцию под названием musthave.

 

Скачать архив 194 SVG логотипа:

194svg-development-logos.zip

 

С этой страницы вы также можете скачать нужный вам логотип (правой кнопкой мыши по нужному логотипу и сохранить как…)

 

В архиве вы найдете:

AngularAngular svg logo
AnsibleAnsible 
ApacheApache
ApiaryApiary
ArduinoArduino
AtomAtom
Auth0Auth0
AutoprefixerAutoprefixer
AWSAWS
BabelBabel
BackboneBackbone
BashBash
BemBem
BitbucketBitbucket
BlocsBlocs
BootstrapBootstrap
bourbonbourbon

BowerBower
BracketsBrackets
BrowserifyBrowserify
BrowserStackBrowserStack
CapistranoCapistrano
CassandraCassandra
ChaiChai
ChalkChalk
ChefChef
ChromeChrome
CircleCICircleCI
CodeIgniterCodeIgniter
CodepenCodepen
CodeshipCodeship
CoffeeScriptCoffeeScript
CompassCompass
CouchDBCouchDB
CoverallsCoveralls
Cross Browser TestingCross Browser Testing
CSS3CSS3
cssnextcssnext
D3D3
Digital OceanDigital Ocean
DjangoDjango
dockerdocker
.NET
Drupal
EclipseEclipse
ElasticsearchElasticsearch
ElectronElectron
EmmetEmmet
Engine YardEngine Yard
ErlangErlang
ES6ES6
EslintEslint
ExpressExpress
Famo.usFamo.us
FirebaseFirebase
FirefoxFirefox
FlaskFlask
flexible.gsflexible.gs
FlowFlow
FluxFlux
ForeverForever
GitGit
GitlabGitlab
Google CloudGoogle Cloud
Google DevelopersGoogle Developers
GoGo
GrailsGrails
GruntGrunt
GulpGulp
HamlHaml
HandlebarsHandlebars
hapihapi
HarrowHarrow
HaskellHaskell
HerokuHeroku
HTML5HTML5
HTML5 BoilerplateHTML5 Boilerplate
InvisionInvision
io.jsio.js
IonicIonic
JadeJade
JasmineJasmine
JavaJava
javascript (JS)javascript (JS)
JenkinsJenkins
JetBrainsJetBrains
JIRAJIRA
JoomlaJoomla
jQueryjQuery
jsbinjsbin
JSONJSON
jspmjspm
KarmaKarma
Keen IOKeen IO
KrakenKraken
KrakenjsKrakenjs
Laravel
LeafjetLeafjet
LessLess
LodashLodash
MailchimpMailchimp
MandrillMandrill
MariaDBMariaDB
Marionette.jsMarionette.js
MarkdownMarkdown
Material UIMaterial UI
MDNMDN
MemcachedMemcached
MercurialMercurial
MeteorMeteor
MochaMocha
ModernizrModernizr
MongoDBMongoDB
MySQLMySQL
NativeScriptNativeScript
NeatNeat
Neo4jNeo4j
NetbeansNetbeans
New RelicNew Relic
NGINXNGINX
NodejitsuNodejitsu
Node.jsNode.js
nodemonnodemon
NPMNPM
NuclideNuclide
OAuthOAuth
Open GraphOpen Graph
OpenLayersOpenLayers
OptimizelyOptimizely
PassportPassport
PhoneGapPhoneGap
PHP
PlayPlay
PolymerPolymer
PostgreSQLPostgreSQL
PuppetPuppet
PythonPython
QQ
RailsRails
RaphaëlRaphaël
ReactReact
RequireJSRequireJS
Rest
Riak
Ruby
RubyGemss
SaltStackSaltStack
Sas
Scala
Segment
SinatraSinatra
Snap.svg
Socket.ioSocket.io
SpringSpring
Stack OverflowStack Overflow
Stash
Stylus
SVGSVG
SwiftSwift
SymfonySymfony
TraackrTraackr
Travis CITravis CI
VaadinVaadin
VagrantVagrant
Visual StudioVisual Studio
Visual Website OptimizerVisual Website Optimizer
Vue.jsVue.js
W3C
webpack
WebPlatformWebPlatform
Wercker
WordPress
YCombinator
Yeoman

Лучшие бесплатные программы для создания логотипов на Mac

Если у вас есть блог, свой сервис или бренд, то вам нужен логотип. Визуальная репрезентация бренда очень важна для его узнаваемости. Если вы только начинаете своё дело, то вам вряд ли хочется тратиться на профессионального дизайнера.

Вы можете сами создать свой логотип с помощью бесплатной программы. Ниже мы собрали список лучших таких программ для Mac.

Logo Maker – Design Monogram

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

Функции Logo Maker:

• Кастомизируйте шрифт, фон, цвета и формы.
• Используйте слои для элементов логотипа.
• Экспортируйте логотип в формате JPG или PNG.
• Создавайте постеры, буклеты и визитки со своим логотипом.

В Logo Maker есть много шаблонов и значков на выбор. К тому же, вы можете полностью кастомизировать свой логотип. Также есть платная подписка с дополнительными функциями.

• Поддержка: Mac, iPhone, iPad, Android, веб-сайт.
• Цена: Бесплатно + платная подписка.

FotoJet Designer Lite

В FotoJet Designer Lite вы можете использовать все доступные шаблоны и сортировать их по категории. Кастомизация тоже доступна.

Функции FotoJet Designer Lite:

• Кастомизируйте шрифт, изображения, прозрачность и многое другое.
• Сохраняйте логотипы в формате JPG или PNG с прозрачным фоном или нет.
• Делитесь логотипами в социальных сетях.
• Создавайте визитки, приглашения, буклеты, обложки и рекламу с логотипом.

Интерфейс программы FotoJet Designer Lite очень простой и удобный.

• Поддержка: Mac, Windows, веб-сайт.
• Цена: Бесплатно + платная подписка.

LogoDesign2

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

Функции LogoDesign2:

• Добавляйте фигуры, символы, эмодзи, животных и др. на свой логотип.
• Добавляйте текст разных шрифтов, размеров, цвета и т.п.
• Используйте инструменты для вращения, обрезки, объединения и т.д.
• Экспортируйте логотип в формате SVG, SVGZ, PNG, JPG и др.

В этой программе нет шаблонов, зато ваши возможности не ограничены. Можете проявить свою фантазию.

• Поддержка: Mac
• Цена:Бесплатно + покупка всех доступных функций.

Список не большой, но программы в нём точно лучшие из доступных. В каждой есть все необходимые функции, которые помогут вам создать свой логотип.

Оцените пост

[всего: 0 рейтинг: 0]

Смотрите похожее

Mac Приложения

Logo Maker — Создайте свой собственный логотип Svg за считанные минуты!

Ширина (пикс.) 400515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891 1921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892 2922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893 39239339439539639739839 94004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894 4924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895 5925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896 692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732 73373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477477577677777768769770771772773774784785979989987784784785909777787797807817827837847847859099879837847847850009987

Высота (пикс.) 200363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891 1921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892 29229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838 93 3923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894 4924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895 5925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896 692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722 72372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476578078077777776876977077177277784784784775777677687697707772777847847817767767768769770771727737784784775777677687697707717277378478479779

Рамка Да Нет

Логотипы и политики масштабируемой векторной графики W3C

Логотипы и политики масштабируемой векторной графики W3C Политики

Логотип SVG основан на дизайне британского художника Харви Рейнера.Это было выбрано Рабочая группа SVG из сотен заявок на конкурс, проведенный в 2006 г. сторонниками и производителями формата SVG. Этот неофициальный логотип был быстро принят сообществом, и многие вариации были включены в Материалы, связанные с SVG. Представленные здесь версии были приняты в качестве официальных Логотип W3C SVG в 2009 году, с разрешения оригинального художника и дирижеры конкурса.

Следующие логотипы масштабируемой векторной графики Консорциума World Wide Web имеют особые политики использования.

1. Логотипы W3C SVG: пусть ваше творчество расцветет!

Цветочная структура логотипа SVG пробуждает креативность и рост, в то время как подключенные узлы указывают на интеграцию с другими технологиями.

W3C предполагает использование логотипа SVG вместе с другими изображениями, связанными с открыть веб-стандарты.

2. Технологические кнопки W3C SVG

3. Использование

Эти политики были заимствованы из логотипов Семантической паутины на основе Обратная связь от сообщества.

логотипов SVG и технологических кнопок, которые включают «W3C»

Использование в некоммерческих целях регулируется W3C. Лицензия на документ со следующими исключениями:

• Для логотипов SVG (горизонтальных и вертикальных) размер логотипа МОЖЕТ быть изменен. без разрешения.
• Для кнопок технологий, размера логотипа, цвета переднего плана и фона. названия технологии МОЖЕТ быть изменено без разрешения.
• В Интернете логотипы SVG ДОЛЖНЫ указывать на < http: // www.w3.org/Graphics/SVG/ >
• В Интернете кнопки технологий МОГУТ ссылаться где угодно, но W3C предлагает используя < http://www.w3.org/Graphics/SVG/ >

Использование этих логотипов в коммерческих целях ТРЕБУЕТСЯ разрешения W3C. Пожалуйста, отправьте запросы на [email protected].

Только логотип SVG и с «SVG» (без логотипа W3C)

По вашему выбору использование регулируется либо :

W3C Лицензия на документ со следующими исключениями:

• Размер логотипа, цвета переднего и заднего плана названия технологии МОГУТ изменяться без разрешения.
• Когда эти логотипы используются в сети, ТРЕБУЕТСЯ указание авторства с использованием любых из следующих техник (возможно, в сочетании):
  • Текст «alt» изображения должен быть «Логотип W3C SVG» или
  • Для версии логотипа SVG с использованием исходных предоставленных метаданных от W3C в коде источника логотипа или
  • Логотип должен указывать на веб-сайт W3C с использованием следующего URI: < http://www.w3.org/Graphics/SVG/ >
• В случае указания авторства без использования ссылки, логотипы МОГУТ ссылаться на где угодно, но мы предлагаем использовать < http: // www.w3.org/Graphics/SVG/ >

или

Лицензия Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) лицензия. Авторство изображения должно быть «Логотип W3C SVG».

4. Часто задаваемые вопросы (FAQ)

1. Почему W3C разработал логотипы SVG?

До сих пор у W3C не было официального логотипа SVG. Новая технология, ориентированная на кнопки были разработаны, чтобы быть частью бренда SVG. По мере продвижения вперед мы могут создавать и использовать более конкретные изображения для некоторых технологий которые составляют SVG, например.г., для футболок или кружек.

2. Могу ли я изменить цвет переднего и заднего плана текст в кнопках Технологии?

Да.

3. Могу ли я изменить цвета логотипа?

Если в логотипе есть «W3C», нет. В противном случае да.

4. Могу ли я изменить размер всех вышеперечисленных логотипов?

Да. Это особенно легко сделать с SVG-версиями логотипа.

5. Могу ли я изменить цвет переднего или заднего плана «W3C» логотип?

№

6. Могу ли я создать локальную копию логотипа или кнопки SVG?

Да. Если вы делаете локальные копии, вам следует периодически проверять наличие обновлений. из W3C (например, для учета небольших изменений или новых форматов).

7. Где уместно использовать логотип SVG?

Везде, где вы продвигаете SVG. Это может быть кнопка или логотип на сайте. который использует SVG, слайд-презентации, в которых вы говорите о SVG, соглашениях или группы по интересам, в которых тема SVG — и так далее. Для коммерческого использования, например продавая наклейки или футболки, вам потребуется явное разрешение W3C.Обратите внимание, что логотип «W3C» и версии логотипа SVG, содержащие «W3C» логотип, не следует использовать без явного разрешения W3C в ситуациях, когда подразумевают поддержку W3C (например, для соглашения, в котором W3C отсутствует). если ты у вас есть угловой корпус, который здесь не рассматривается, и вы хотите быть уверены в лицензирование, не стесняйтесь обращаться к нам.

8. Могу ли я использовать логотип SVG на упаковке продукта или реклама?

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

9. Почему вы использовали лицензию W3C Document License, а не Лицензия Creative Commons?

Наша цель — разрешить определенные виды производных работ (изменение размера, цветов) и требовать атрибуции определенным образом (альтернативный текст или конкретный URI). На веб-сайте Creative Commons неясно, можем ли мы использовать Лицензия Creative Commons для этого.С одной стороны, мы находим, например, для «by-nd» этот текст: «Вы должны атрибутировать произведение в порядке, указанном автором. или лицензиар (но никоим образом не предполагает, что они одобряют вас или ваше использование работы) ». Однако в разделе 4 (b) подробных условий лицензирования, мы находим: «Кредит, требуемый в соответствии с разделом 4 (b), может быть осуществлено любым разумным способом; …. «что, по всей видимости, противоречит с первым утверждением (или, по крайней мере, более снисходительным, чем).

W3C Лицензия на документ очень похожа на «by-nd» и добавляет ограничение на некоммерческое использование аналогично «by-nc-nd.»Если мы узнаем больше, и там повернется чтобы не было противоречия, мы также можем начать использовать соответствующие Лицензия Creative Commons в этой политике.

---

Корали Мерсье, руководитель отдела маркетинга и коммуникаций W3C ([email protected])
Последнее изменение: $ Дата: 31.08.2020 18:23:33 $

Авторские права © 2017 W3C ^® (MIT, ERCIM, Keio, Beihang) Применяются правила использования.

Используйте SVG для вашего логотипа

Когда я писал о SVG в 2016 году, это были большие новости.Сейчас для нас стандартно использовать формат SVG для логотипов на разрабатываемых нами веб-сайтах. Меня всегда удивляет количество запускаемых новых веб-сайтов с логотипами в формате PNG. Каждый должен использовать логотипы в формате SVG на своих сайтах в 2020 году!

SVG означает «Масштабируемая векторная графика», формат изображения, который позволяет масштабировать изображение практически до любого размера без потери качества (и выглядит еще лучше на дисплеях Retina). Это также формат небольшого размера файла, который хорошо сжимается.

Сравнить PNG с SVG

Давайте сравним файл изображения PNG с файлом изображения SVG.

Версия PNG Версия SVG

Вы видите разницу — особенно если смотрите на сетчатку экрана? До SVG мы использовали версию логотипа «обычного» размера, а затем размер «2x» для экранов Retina, которые имеют более высокое разрешение.С SVG вам больше не нужны два размера. Если вы уменьшите или увеличите его размер, файл PNG плохо масштабируется, но SVG всегда выглядит отлично.

Как создать файл SVG

Чтобы создать файл SVG, вам потребуется векторная версия логотипа или иллюстрации. Векторная графика определяется в виде двухмерных точек, которые соединяются линиями и кривыми, образуя многоугольники и другие формы с разными свойствами. Вектор может быть файлом Adobe Illustrator, форматом PDF или EPS.

Большинство людей больше знакомы с изображениями в формате jpg и png, которые являются растровыми изображениями. Растровые изображения (также известные как растровые изображения) состоят из пикселей, причем цвет каждого пикселя определяется количеством битов. Растровая графика зависит от разрешения, то есть она не может масштабироваться до произвольного разрешения без потери видимого качества или пикселизации.

Если у вас нет векторной версии, вы можете воссоздать свой логотип в виде векторного файла. Есть дизайнеры, которые на этом специализируются.Мы нашли в Upwork талантливых специалистов по преобразованию векторных файлов.

Вы можете использовать такую ​​программу, как Adobe Illustrator, Sketch или Figma, чтобы легко сохранить файл в формате SVG. SVG на самом деле является КОДОМ, что означает, что вы также можете редактировать его и анимировать на своем веб-сайте с помощью пользовательского кода!

SVG

не только для логотипов

SVG можно использовать для всех типов иллюстраций и значков. Если вы покупаете стоковые иллюстрации, вам следует поискать версию в векторном / eps и загрузить ее.

Нужна помощь в создании векторной SVG-версии вашего логотипа и обновленного, обновленного внешнего вида вашего веб-сайта? Свяжитесь с нами !

Как создать BIMI-совместимый логотип с использованием изображений SVG

* обновлено 03.11.20, чтобы отразить выпуск инструментов преобразования SVG рабочей группой BIMI

Brand Indicators for Message Identification (BIMI) — это развивающийся стандарт, который позволяет брендам отображать свои логотипы вместе с аутентифицированными сообщениями электронной почты.BIMI был разработан, чтобы быть простым, но из-за спецификаций безопасности логотипа требуется несколько ручных настроек для создания широко используемого логотипа BIMI.

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

Чтобы подготовиться к BIMI, вам необходимо обратиться к принудительному использованию DMARC с некоторыми особыми условиями. Вот еще немного информации о том, как подготовиться к BIMI.

Вам также понадобится логотип BIMI в правильном формате, а для некоторых реализаций вам также может потребоваться сертификат проверенной марки (VMC), подтверждающий, что логотип принадлежит вашей организации.

Текущие требования к логотипу BIMI гласят, что логотип должен быть:

• Квадрат
• SVG Tiny Portable / Secure формат
• Сплошной фон
• Опубликовано через HTTPS

AuthIndicators (рабочая группа BIMI) разработала спецификацию для логотипов BIMI под названием SVG Tiny Portable / Secure.

SVG означает масштабируемую векторную графику, которая представляет собой изображение, состоящее из одной или нескольких фигур, определенных точками, соединенными линиями и кривыми. Это отличается от растровых или растровых изображений (PNG, GIF, JPEG), которые состоят из множества цветных пикселей. В отличие от растровых изображений файлы SVG можно масштабировать до любого размера без потери разрешения.

BIMI-совместимые логотипы можно создать, внося некоторые изменения в логотип SVG Tiny 1.2 — вручную или с помощью инструментов преобразования, разработанных Рабочей группой BIMI.

Факторы, которые следует учитывать при форматировании вашего логотипа:

• Изображение должно иметь квадратное соотношение сторон для правильной подгонки.
  • Подумайте, где будет отображаться ваше изображение — изображения в почтовом ящике могут располагаться в кругах, квадратах и ​​других местах; по этой причине изображение должно быть центрировано
• Используйте сплошной цвет фона, чтобы различные среды отображения изображений не влияли на рекомендации бренда.
• Файл SVG должен быть компактным и не превышать 32 КБ.

Краткие инструкции

1. Экспорт SVG Tiny 1.2 версия вашего логотипа (подробнее об этом см. В руководстве по устранению неполадок)
2. Для следующего шага у вас есть два варианта:
   1. Если вы хотите использовать инструменты группы BIMI для преобразования изображения SVG Tiny 1.2 в SVG Tiny Portable / Secure : посетите страницу инструментов преобразования группы BIMI: https: /bimigroup.org/svg-conversion-tools-released /

   2. Если вы вносите изменения вручную : откройте логотип SVG Tiny 1.2 в любом редакторе кода и перейдите к шагу 3

3. Внесите следующие изменения в код XML:
   1. Измените baseProfile на «tiny-ps»
   2. Удалить атрибуты x / y
   3. Добавьте заголовок (это может быть название вашей компании)

Пошаговое руководство: создание компактных переносимых / безопасных образов SVG для BIMI

Шаг 1: Экспорт в SVG Tiny 1.2 с использованием Adobe Illustrator

1. Откройте файл в Adobe Illustrator.
2. Убедитесь, что ваше изображение является векторным. Файлы, оканчивающиеся на «.ai», «.eps», «.pdf», «.svg», указывают на то, что это, скорее всего, векторный файл.
3. Когда вы будете готовы сохранить файл, нажмите «Файл> Сохранить как…».
4. Откроется диалоговое окно. Назовите файл и в раскрывающемся списке «Формат» выберите «SVG (svg)»
.
5. Нажмите «Сохранить».
6. Это вызовет другое диалоговое окно.В раскрывающемся списке «Профили SVG» выберите «SVG Tiny 1.2»
.
7. В раскрывающемся списке «Местоположение изображения» выберите «Сохранить».
8. Нажмите «ОК»

Как вы теперь знаете, правила SVG Tiny P / S требуют ручной настройки экспортируемых логотипов SVG Tiny 1.2. После успешного экспорта логотипа SVG Tiny 1.2 вы можете сделать свое изображение совместимым, используя редактор кода для настройки двух строк кода XML, из которого состоит ваш логотип.

* Как упоминалось ранее, рабочая группа BIMI выпустила инструменты преобразования, которые помогут вам создать логотип SVG Tiny P / S из SVG Tiny 1.2 версия. Если вы хотите использовать один из этих инструментов, посетите: https://bimigroup.org/svg-conversion-tools-released/

Если вы хотите внести эти изменения вручную с помощью редактора кода, см. Шаг 2.

Шаг 2: Откройте свой логотип SVG Tiny 1.2 в редакторе кода, чтобы обновить изображение до SVG Tiny Portable / Secure

Есть ряд бесплатных инструментов; вы найдете несколько рекомендаций ниже:

При открытии в редакторе кода XML-код будет выглядеть следующим образом:

Затем выполните следующие шаги, чтобы внести незначительные изменения в XML:

1. Если ваше изображение содержит атрибуты x / y, удалите их — (в этом примере просто удалите «x =: 0px» y = «0px»)
2. Измените baseProfile на «baseProfile =» tiny-ps (напишите «-ps» после «tiny» в строке 3).
3. Добавьте )
4. После внесения этих изменений сохраните изображение. XML-код вашего изображения будет выглядеть примерно так:

Дополнительные ресурсы по SVG и BIMI

Как добавить изображение SVG в качестве логотипа в шаблон Joomlashack

Формат изображения SVG — лучший формат изображения, обеспечивающий хорошее отображение логотипа вашего веб-сайта независимо от размера устройства просмотра.

Из этого туториала Вы узнаете, как добавить изображение логотипа в формате SVG в шаблон Joomlashack.

Вот вкратце процесс.

1. Создайте отдельную папку для изображений SVG в основном компоненте «Медиа»
2. FTP необходимое изображение SVG в эту папку
3. Создайте пустой модуль Joomla типа «Custom»
4. Вставьте изображение SVG в этот модуль
5. Установите для этого модуля параметр «Image Logo» в вашем шаблоне Joomlashack.

Давайте рассмотрим этот процесс подробнее.

---

Шаг №1. Создайте папку для ваших изображений .svg в Joomla Media Manager

.

• В панели администратора Joomla перейдите в «Контент»> «Медиа»:

• Вы попадете на экран «Медиа». Нажмите кнопку «Создать новую папку» и создайте новую папку специально для ваших изображений SVG. Для этого урока я создал папку «svgs»:

---

Шаг 2.FTP необходимое изображение SVG в новую папку

• Используйте FTP-клиент по вашему выбору и перенесите необходимое изображение SVG в новую папку, созданную вами для изображений SVG. Для демонстрации я загрузил образ mysvg.svg .

• Откройте только что созданную папку. Теперь вы должны увидеть свое изображение SVG в списке:

Молодец! На следующем шаге вы создадите модуль Joomla, который будет содержать и отображать изображение вашего логотипа SVG.

---

Шаг 3. Создайте пустой модуль Joomla типа «Custom»

• В панели администратора Joomla перейдите в «Расширения»> «Модули»:

• Вы попадете на экран «Модули (сайт)». В верхнем левом углу нажмите «Создать»:

• В списке типов модулей нажмите «Пользовательский»:

• Вы попадете на экран «Модули: Пользовательские».Задайте параметры модуля:
  • Заголовок : введите описательный заголовок. Для демонстрации я использовал название «Мой логотип».
  • Показать заголовок : Щелкните «Нет».
  • Позиция : Выберите положение «Логотип».
  • Publishing : Выберите сейчас «Нет».
• Нажмите «Сохранить».

Молодец. Вы только что создали контейнерный модуль для своего логотипа. На следующем шаге вы вставите в этот модуль изображение вашего SVG-логотипа.

---

Шаг 4. Вставьте необходимое изображение SVG в модуль логотипа

По соображениям безопасности Joomla не обрабатывает изображения SVG так же, как изображения PNG и JPG. Чтобы вставить изображение логотипа SVG, воспользуйтесь небольшим трюком.

• Когда ваш только что созданный пользовательский модуль все еще открыт, нажмите «Изображение»:

Вы увидите поле «Изображения». Вы можете быть удивлены этим моментом. Хотя вы отправили изображение SVG в эту папку на шаге , шаг № 2, вы все равно увидите сообщение «Изображения не найдены».Давайте проделаем небольшую хитрость, вставив ваше изображение SVG по его URL-адресу.

• Введите в поле «URL-адрес изображения» /images/[name-of-your-svg-folder provided/[name-of-your-svg-file.svg] . Для демонстрации я ввожу / images / svgs / mysvg.svg. Нажмите зеленую кнопку «Вставить» в правом верхнем углу поля:

• Вы увидите свое SVG-изображение, добавленное в HTML-редактор модуля:

Отлично! Вы в одном шаге от добавления изображения SVG в качестве логотипа с помощью шаблона Joomlashack.

---

Шаг 5. Установите параметр «Изображение логотипа» в вашем шаблоне Joomlashack

• Перейдите в «Расширения»> «Шаблоны»:

• Вы увидите экран «Шаблоны: стили (сайт)» со списком шаблонов, установленных на вашем сайте Joomla. Щелкните название вашего шаблона. Для демонстрации я нажимаю «js_civic»:

• Откроется экран «Шаблоны: редактировать стили». На вкладке «Подробности» установите для параметра «Изображение логотипа» значение «Использовать модуль с положением логотипа»:

• Нажмите «Сохранить» или «Сохранить и закрыть».
• Посетите интерфейс вашего сайта. Теперь вы должны увидеть изображение SVG в виде логотипа:

Как создать логотип BIMI SVG

Как создать логотип BIMI, отвечающий всем требованиям

Логотип BIMI должен соответствовать ряду требований, прежде чем он может отображаться во входящих. Если логотип не соответствует этим требованиям, он может не отображаться.Прочтите и узнайте, каковы требования BIMI и как для создания допустимого файла SVG.

Обратите внимание, что рабочая группа BIMI является органом, определяющим спецификации. Приведенные ниже требования и инструкции могут быть обновлены / изменены.

Требования к логотипу BIMI

• Убедитесь, что логотип является векторным. Файлы с расширением: PDF, Ai SVG или EPS часто являются векторными файлами. В случае сомнений обращайтесь к дизайнеру.
• Формат: SVG Tiny 1.2
• Размеры логотипа: квадрат
• Логотип BIMI должен быть опубликован на домене с установленным SSL-сертификатом (https)

Как создать проверенный файл BIMI SVG

Выполните следующие шаги и создайте файл SVG, который можно использовать для записи BIMI.

1. Откройте векторный файл в Adobe Illustrator
2. Сохраните файл как (файл> Сохранить как…)

   Выберите SVG (не: svgz) | Избегайте прописных букв, пробелов, подчеркиваний или странных символов в имени файла.Будь проще. Например: brand-name-bimi.svg

3. Сохраните файл со следующими настройками

   Настройки: Профили SVG: SVG Tiny 1.2 | Расположение изображения: Сохранить

4. Откройте только что созданный файл SVG в редакторе кода / текста

   Если редактор кода недоступен, откройте стандартное доступное программное обеспечение. Например: TextEdit (Mac) или Блокнот (Windows)

5. В строке 3: измените базовый профиль с «tiny» на «tiny-ps»

6. В строке 3: удалите атрибуты x / y

   Если тег SVG (

7. Добавьте заголовок в строку 4

   После добавьте. Пример: Не допускается использование более 65 символов

8. Сохранить измененный файл (SVG)

   Если настроенный файл SVG похож на этот пример. Файл готов.

9. Загрузите файл SVG на сервер, для которого также опубликована запись BIMI

Устранение неполадок с файлом BIMI SVG

Узнайте, содержит ли логотип BIMI растровые изображения

Чтобы узнать, было ли добавлено растровое изображение, проверьте файл SVG.Есть несколько способов проверить исходный код файла SVG. Два упомянуты ниже:

1. Сохранение / загрузка файла SVG (вариант 1)
   1. Откройте файл SVG в TextEdit (Mac) или в Блокноте (Windows)
2. Откройте файл SVG в Google Chrome (вариант 2)
   1. Просмотрите исходный код (просмотр> разработчик> исходный код)
3. После того, как исходный код станет видимым, выполните поиск: img /

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

Пример:
Когда следующая строка (file.Xlink: href = ”data: img / png; base64, i) найдена, файл SVG содержит ссылку на PNG (растровое изображение).

Решение
Попросите разработчика логотипа изменить файл так, чтобы он был полностью векторным.

Большие файлы SVG без растровых изображений

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

Решение
В этом случае откройте файл SVG в Adobe Illustrator и выполните шаги, указанные выше.Это создаст хорошо закодированный файл SVG.

Ресурсы

Создание файлов логотипов BIMI SVG

Мы получили ряд вопросов о создании правильных файлов SVG для логотипа BIMI вашего бренда. Мы надеемся, что это прояснит требования и ответит на наиболее часто задаваемые вопросы.

Отображаемое изображение бренда должно быть в формате масштабированной векторной графики (SVG). Конкретный профиль SVG, используемый BIMI, определяется как SVG Portable / Secure (SVG P / S).Это профиль формата SVG Tiny 1.2, стандартизированный консорциумом World Wide Web (W3C). Профиль SVG P / S более строгий, чем SVG Tiny 1.2, а это означает, что изображение SVG Tiny 1.2 потребует изменений, чтобы оно соответствовало BIMI.

При создании SVG в структуре файла есть ряд обязательных элементов:

• Атрибут «baseProfile» установлен на «tiny-ps»
• Атрибут «version» установлен на «1.2»
• Должен быть включен элемент