HTML5 SVG logo

Create a Logo with CSS

Today, we’re creating a simple logo with CSS. Since CSS3 became generally available in all browsers a few years ago, we can use a lot more builtin browser features where before Photoshop became necessary (I just say rounded corners!). Creating a simple logo with CSS is one of these situations where we can leverage recent CSS features such as transform and animation to create something visually appealing!

Create a div container

Create a container that will contain our logo

Create a CSS Class

We’re assigning a new font-size to verify that the class gets applied.

Pick colors and configure display settings

If you don’t already have a color scheme, go ahead and create one. I use https://coolors.co for that. With the new color scheme in place, let’s define a background and text color:

After plugging in the colors you will notice that the expands over the site’s full width.

This happens because is a block element. It automatically expands over the full page width.

By default, a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

In our case, we’d like the to occupy only as much space as it really needs. We can accomplish this by changing its display setting to inline-block .

What you can see now is that its width has changed so that it only is as long as its content.

With display we can change an HTML element’s way of rendering itself. The setting block ensures that it takes up the full width of its parent container, where inline on the other hand works like this:

The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space

https://developer.mozilla.org/en-US/docs/Web/CSS/display

inline-block is a combination of inline and block :

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Set a new font

It’s time for a different font. Right now the logo text is rendered using the browser’s default font. We’d like to customize this a bit.
Instead of the default font, we now use Courier. Add font-family: Courier to the class.

Margin and Padding

The next step is to add some margin and padding to improve optics. Add margin: 15px; and padding: 15px; to the class:

Margin defines the space between the element’s outer borders and its parent conainer, where with padding we can control the space between the element’s inner border and its children.

Time for Transformations

Did you know that CSS can also animate and transform your HTML elements? Let’s get into it.
First, we’ll do some rotation and skew.

Add transform: rotate(-10deg) skew(-17deg); to the class:

transform accepts a bunch of different values. In our case, we’re configuring a -10 degree rotation, followed by a skew. The skew ensures that the text looks a bit more natural. The logo now looks like this:

Animate!

In the last step we’re adding some animation as well. It’s possible to animate a lot of different properties. In our case, we’re focusing on the background color.

We start with defining keyframes .

These define the different states of the animation. We specify a color at 0%, 50% and 100% to ensure a gradient. Once the keyframes are in place, it’s time to use them on our logo class. We add animation: pulse 5s infinite; style for that:

Let’s break down the animation style. We specify that we’d like to use the pulse keyframes in a five second interval. Also, the animation is supposed to run indefinitely. The browser takes care of everything else.

And with this we’re done! You just created your first logo with CSS and animations!

Make sure to checkout the source code for this example on Codepen!

Источник

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

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

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

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

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

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

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

мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG —

— показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега

Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.

MIME-Type

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

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

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

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

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

Источник

How to draw SVG Logo in HTML5?

In the following article we are going to learn how to draw an SVG logo in HTML5. Before we jump into the article, let’s discuss a few things about SVG. The image format known as Scalable Vector Graphics (SVG) uses vector data. Unlike other formats, SVGs do not use unique pixels to construct your image. It makes use of vector data instead.

The best thing of using it was Making pictures that scale to any resolution is possible with SVGs, which makes them ideal for web design among many other applications.

Let’s look into the simple example for understanding of SVG

Example

When the script gets executed, it will generate an output consisting of an SVG circle drawn on the webpage with the given measurements in the above script.

What is an SVG

Two-dimensional vector graphics are described using SVG, a markup language, which uses XML. This is a text-based technique that works with other technologies like CSS, DOM, JavaScript, and SMIL to describe images of any size.

SVG format vector pictures, for example, can be scaled without losing quality. In contrast to bitmapped pictures like JPEG and PNG, they can also be localized without the need for a graphics editor.

Following are the Example to Draw SVG Logo in HTML5

Example 1

In the following example we are creating a SVG logo on the webpage.

When the script gets executed, it will generate an output consisting of an ellipse drawn with a linear gradient with the text «TUTORIALSPOINT», which acts as a logo on the webpage.

Example 2

Consider the following example we are creating SVG logo on the webpage

When the above script is run, it will produce an output consisting of the traffic signals drawn on the webpage using the measurements given in the above script, which acts as a logo.

Example 3

Let’s look another example, where we are creating a SVG logo on the webpage.

On running the above script, the output window will pop up, displaying the SVG logo mentioned with a linear gradient drawn on the webpage using the measurements mentioned in the above script.

Источник