Как сделать svg логотип

Png логотип в SVG?

как можно сделать из логотипа png такой же только в svg?

Если простая фигура, можно перевести в вектор с помощью сервиса «Vectorizer»

Если не получается, нарисовать самому.
Я еще не профи в этом, но могу попробовать помочь, если сбросите требуемое изображение

PNG это растровая графика. SVG больше по векторному (описывает координаты линий, точек).

Почему глупость? Совсем нет, если логотип позволяет без изменений в дизайне сделать перевод в вектор без потери деталей — лучше это сделать, чтобы был полноценный исходник. А сейчас 99,9% современных логотипов в плане выбранной стилистике и форм такие, что рисуются спокойно в векторе.

Как вы растровую графику в вектор переведете?) В каком моменте качество улучшишься?)

К примеру у вас картинка 100×100 пикселей, png. Вкинули в фотошоп, сохранили как SVG и теперь если распечатаете ее на 10×10 метров не будет потерь в качестве?))

Вкинули в фотошоп, сохранили как SVG

lagudal, я так понял вы хотите перерисовать ее. А чего логотип выделили, это не графика что ли?) логотипы не бывают растровые?)

А в вашем духе можно ещё пару вариантов предложить:
1) перерисовать логотип
2) заказать у того кто перерисует
3) купить если продаётся
4) принять в подарок если подарят

Источник

Как проектировать, создавать и анимировать SVG

Вы можете считать Масштабируемую Векторную Графику (Scalable Vector Graphics — SVG) отзывчивой графикой. SVG основан на формате XML, который позволяет создавать изображение, используя определённые теги и атрибуты. Ваш код сгенерирует изображение, которое можно изменять прямо в текстовом редакторе.

Флаг Японии сделанный с помощью SVG

Но более интересное использование заключается в том, что мы можем вставлять SVG напрямую в

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

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

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

Растровые картинки состоят из пикселей, создающих целостное изображение. JPEG, GIF и PNG — самые распространённые типы растровых изображений.

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

Вот что происходит при увеличении растрового изображения:

Что происходит при увеличении растрового изображения

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

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

Вот что происходит при увеличении векторного изображения:

Что происходит при увеличении векторного изображения

SVG-теги

Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

Вот как он может выглядеть:

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

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

может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

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

Создаём SVG

Есть множество доступных SVG-редакторов, например, Adobe Illustrator или Inkscape. Последний бесплатен и с открытым исходным кодом. Поскольку SVG-файлы это XML-код, то в крайнем случае вы можете написать его вручную.

Для этого примера я буду использовать простой онлайн-редактор. В нём вы можете создавать SVG без необходимости устанавливать что-либо ещё.

CSS3-анимация

SVG может быть анимирован с помощью добавления атрибута id или class SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.

CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

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

Анимационный тег

Основные элементы, которые анимируются этим тегом: цвет, движение и трансформация.

Вот пример анимации SVG с помощью тега :

Анимация и интерактивность, основанная на JavaScript

Поскольку SVG — это просто документ с тегами, то мы можем использовать JavaScript для взаимодействия с отдельными элементами SVG, получая их при помощи селекторов ( id или class ).

Помимо стандартного JavaScript, есть множество JS-библиотек для анимации и взаимодействий с SVG: Vivus.js, Snap.svg, RaphaelJS и Velocity.js.

В следующем примере я использовала библиотеку Vivus.js вместе с jQuery, чтобы получить анимацию линий:

Почему нельзя использовать SVG для всех изображений?

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

Источник

Создание адаптивных изображений

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «Большой потенциал SVG».

Я узнал две вещи, которые меня потрясли:

Рождение идеи

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

Итоговый результат

Если вы заинтересовались, то загрузите последнее демо или посмотрите его на CodePen.

Шаг за шагом

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

1. Разработка логотипа

Начнем с разработки четырех версий нашего логотипа. Я выбрал для этого Sketch.

Варианты логотипа: вертикальный — портрет — квадрат — горизонтальный

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

Как видите, логотип состоит из визуального элемента и названия компании. Только в квадратной версии я решил не использовать название компании. Это было сделано по той причине, что я хотел сделать логотип различимым, даже когда он будет использоваться как крошечная миниатюра размерами 32px на 32px.

2. Настройка SVG-файла

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

Если вы посмотрите на атрибуты, то заметите, что атрибут viewBox отсутствует. Мы только устанавливаем 100% ширину и высоту.

(Примечание. Есть также два атрибута xmlns. Если честно, я точно не знаю, почему их необходимо использовать, надо бы загуглить… в любом случае, если их удалить, то нельзя будет использовать какие-либо символы в SVG, и вместо них вы будете получать сообщения об ошибках).

3. Экспорт SVG-символов

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

Поместим все символы в отдельные области перед экспортом в SVG

Крайне важно, чтобы вы не экспортировали объекты, а всегда создавали новую область редактирования. Если вы экспортируете элементы из более крупной области редактирования, то получите странные параметры преобразования, прикрепленные к вашим группам. Это также помогает отделить все символы и удалить все неиспользуемые группы. Наконец, подберите подходящее наименование.

Я бы рекомендовал использовать что-то вроде SVGOMG, чтобы уменьшить размер файла и удалить все ненужные вещи. Но не удаляйте ID. Если вы как-то обозначили слои в Sketch, то сможете их идентифицировать по ID в конечном файле.

Если все правильно, то вы увидите группу, которая имеет имя области редактирования в качестве ID. Нас интересует контент внутри этой группы. В данном примере это прямоугольник, который служит фоном и образованная сложным путем цифра IX (римская цифра 9 вращается против часовой стрелки на 90 градусов… поясняю на всякий случай).

4. Построение символов

Все наши файлы готовы и могут быть собраны вместе. Начнем с написания тэгов некоторых символов в конечном файле и укажем для каждого символа уникальный ID, так же, как и атрибут viewBox, который соответствует viewBox экспортируемых файлов.

Наконец, вставим содержимое экспортируемых файлов (внутри группы, названной как область редактирования) внутрь тегов символов.

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

Все идет по плану. К сожалению, если вы откроете файл в браузере, вы ничего не увидите. На данный момент мы определили символы, но еще нигде их не разместили. Чтобы вставить символ, нужно использовать в файле тег use :

Давайте посмотрим, что именно происходит.

Во-первых, xlink: href указывает на символ с уникальным ID и будет отображать его содержимое… точнее, не реально отображать, а клонировать, и внезапно появляется странная вещь под названием Shadow DOM. Это звучит несколько странно, но не стоит бояться. До тех пор, пока вы не захотите что-нибудь поменять внутри символов через CSS, вам не о чем беспокоиться.

Помимо безразмерных значений, вы также можете использовать процентные для определения позиции и размеров объекта. Чтобы символ выглядел как квадрат, просто используйте ширину 90% и расположите его верхний левый угол в 5% от ограничивающей изображение рамки:

(Может быть, вы думаете, что автонастройка ширины или высоты — хорошая идея… но это не так. Safari и Firefox просто игнорируют ее, а Chrome ничего не отрисует)

6. Объединение символов внутри нового символа

Для портретной версии нам нужны оба символа. Чтобы убедиться, что они масштабируются пропорционально и всегда расположены на одинаковом расстоянии от границ и по отношению друг к другу, мы просто создаем еще один символ. Этот символ имеет свой собственный атрибут viewBox, который позволяет разместить наши символы в новой системе координат. Чтобы понять, где именно символы должны быть размещены, можете просто вернуться в свой файл и проверить размеры и расстояния.

Портретная версия: Purple: viewBox — Red: Position — Turquoise: Width and Height

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

Когда мы используем этот символ, мы не хотим, чтобы его ширина была 100%, поэтому просто масштабируем его как квадрат.

7. Скрыть и показать

Единственное, чего теперь не хватает — это CSS, чтобы показывать только одну версию логотипа в каждый момент времени. Вы можете добавить тег style в SVG и использовать медиа-запросы точно так же, как и в обычном файле CSS.

В CSS вы, скорее всего, используете что-то вроде @media (min-width: 768px) <. >, но тогда вы рассматриваете только ширину изображения. Мы же заинтересованы в пропорциональности, а не в ширине, поэтому наши медиа-запросы должны выглядеть следующим образом: @media (min-aspect ratio: 1/2) <. >.

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

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

Вот и все. Мы закончили создание собственного адаптивного логотипа в формате SVG.

8. Немного о трансформации

Да, я знаю, что вертикальная версия отсутствует в приведенном выше примере. Причина в том, что потребуется выполнить некоторое преобразование, чтобы создать необходимый символ. Я не буду вдаваться в детали, просто дам вам необходимый код:

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

Источник

Как сделать svg логотип

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

1. Для создания иконок лучше использовать программы Photoshop или Figma.

Figma имеет бесплатную начальную версию. Может работать в браузере.

2. Создавая иконку, нужно учитывать размер поля, в которое она будет помещена. В данном случае 40 х 40 px:

Если иконка будет больше этого поля, то она уменьшится, и линии будут нечеткими.

3. В идеальной иконке должно быть 2 слоя. Первый слой с прозрачностью 100%, второй — 10%. Но слоев может быть больше. Все зависит от сложности иконки и инструментов, которыми она нарисована.

4. После того, как иконка нарисована, все слои, из которых она состоит, нужно поместить в группу в Photoshop. В Figma нужно поместить в группу или фрейм.

Figma — группа.

5. Затем экспортируйте иконку в формат SVG.

Кликните правой кнопкой мыши по группе с иконкой. Выберите Export as.

Убедитесь, что выбран формат SVG и нажмите Export All.

Выделите фрейм или группу с иконкой. В правой панели в блоке Export выберите SVG и нажмите Export.

6. Проверьте иконку в браузере. Все линии и фигуры в иконке должны быть в теге

. Не должно быть тегов, например, (Инструмент «Rectangle» в Figma) или (Иструмент «Ellipse» в Figma). Иначе иконка не будет краситься в цвет темы.

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

. Например, изменить на

в Figma, нарисовав прямоугольник не инструментом «Rectangle», а инструментом «Pen».

Источник

Логотип в SVG формате – создайте и скачайте онлайн самостоятельно

Уже давно стало понятно, что пора использовать логотипы в формате svg на своих сайтах и всех фирменных носителях.

Если вам необходимо прямо сейчас создать логотип в векторном формате, не теряйте время на чтение статьи и переходите к нашему конструктору логотипов!

Но по какой-то причине мы все еще видим множество PNG лого (формат растровых графических файлов) в интернете, даже на новых сайтах, созданных в этом году!

Такие вещи, как логотипы и иконки, кажутся главными виновниками.

Полагаю, вопрос заключается в том, почему?

Почему мы до сих пор их используем?

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

Мы собрали 5 основных причин использовать SVG вместо PNG.

SVG поддерживается во всех браузерах, кроме IE 9 и ниже и старого Android (V3).

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

В двух словах:

Продолжайте читать, чтобы подробно рассмотреть каждый пункт.

1. Разрешение

Не имеет значения размер вашего экрана, уровень масштабирования, разрешение или наличие или отсутствие дисплея «retina».

Это позволяет добиться «бесконечного разрешения», так же как и при создании иллюстраций для печати, при использовании форм, действуют те же принципы!

Использование PNG означает, что вы ограничены пикселями, а это уже 2001 год.

Кроме того, во многих случаях вам необходимо обеспечить работу с устройствами «retina», что означает наличие двух PNG, один из которых почти всегда имеет абсурдный размер файла.

Эти две иконки ниже могут продемонстрировать проблемы с разрешением, увеличьте масштаб (cntrl +) и посмотрите сами, или просто щелкните правой кнопкой мыши и откройте каждый элемент в новой вкладке.

2. Скорость

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

Как известно, чем больше размер файла, тем медленнее он рендерится/загружается.

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

Большой размер файла = более длительное время загрузки.

Бывают случаи, когда SVG могут загружаться очень долго, например, если вы сделали Эйфелеву башню в виде векторной графики с миллионом путей и заливок, в таком случае лучше использовать JPEG… или PNG.

HTTP-запросы: Использование традиционных PNG означает, что, если вы не используете кодировку base64, на изображения придется ссылаться как на внешние ресурсы.

Все эти PNG означают увеличение количества http-запросов и, следовательно, замедление работы сайта.

SVGs не только меньше по размеру, но и XML может быть встроен в HTML, что исключает http-запросы и ускоряет работу сайта.

3. Анимация

SVGs можно анимировать и стилизовать с помощью CSS.

Трансформация/переход, который вы используете для элементов HTML, может быть использован и для элементов SVG.

Есть случаи, когда вы не можете использовать CSS для анимации SVG, но эти случаи обычно можно решить с помощью JavaScript, посмотрите на snap.svg (библиотека JavaScript SVG для современного интернета).

Это открывает целый мир творчества, когда речь идет о вебе.

4. Практичность

Существует множество способов использования SVG в Интернете, от показа логотипов до создания полноценного физического движка в браузере.

Я отношусь к первому лагерю, мне обычно нужны логотипы, иконки и простые анимации в формате SVG.

Логотипы: логотипы обычно создаются в векторном формате, и это правильно.

Дайте кому-нибудь из полиграфистов логотип на растровой основе, и вы увидите, как растает его улыбка.

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

Те же факторы применимы и к иконкам.

Анимация: См. пункт 3

5. Доступность и SEO

Google индексирует SVG, и это хорошая новость.

SVG-контент, независимо от того, находится ли он в отдельном файле или встроен непосредственно в HTML, индексируется.

Недостатки:

В интересах справедливости, вот пара моментов, которые следует учитывать при использовании SVGs.

У вас возникнут проблемы при попытке использовать SVGs в старых браузерах, но, несмотря на это, вы можете иметь запасной вариант, например, замену в виде PNG.

Сложные иллюстрации с тысячамидеталей, вероятно, лучше всего подходят для JPEG, браузеры, пытающиеся отобразить сложные SVG, могут «потерпеть поражение».

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

Источник