Создание комиксов

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

Сохраним в отдельном SVG-файле:


<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 132 136">
<defs>
<style>
	path { 
		fill: white;
		stroke: #000;
		stroke-width: 4;
		stroke-linejoin: bevel;
		vector-effect: non-scaling-stroke;
	}
</style>
</defs>
<path d="M66.1 1.5C30.4 1.5 1.5 22.9 1.5 46c0 18.1 17.9 33.5 42.8 39.3 1.5 14.8-1.3 39-8.5 48.1 10.8-12.5 22.4-33.6 26.6-45.7 1.2 0 2.5.1 3.7.1 35.7 0 64.6-18.7 64.6-41.8S101.8 1.5 66.1 1.5zM35.8 133.4c-.3.4-.7.8-1 1.1.4-.3.7-.7 1-1.1z"/></svg>

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

В стилях у SVG мы задаёт нужные параметры у контура. Свойство vector-effect: non-scaling-stroke позволяет сохранить толщину контура при изменении размеров.

Зададим текст в элементе blockquote.


<blockquote class="speech bubble">Кто сказал <em>мяу?</em></blockquote>

Применим к тексту свойства CSS:


blockquote.bubble { 
    background: url(speech.svg); 
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 25%;
    text-align: center;
    height: 0;
    padding-top: 6%;
    padding-bottom: 20%;
    box-sizing: content-box;
    line-height: 1;
}

Мы задаём нулевую высоту (height: 0), а также делаем отступы (padding-bottom: 20%) и (padding-top: 6%).

Пример

Кто сказал мяу?

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

Здесь тот же технический приём, только используется свойство stroke-dasharray: 20,10.


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" preserveAspectRatio="none">
	<defs>
<style>
	path { 
		fill: white;
		stroke: #ccc;
		stroke-width: 4;
		stroke-linejoin: bevel;
		stroke-dasharray: 20,10;
		vector-effect: non-scaling-stroke;
	}
</style>
</defs>
<path d="M372.8,14.3c-196.9,0-356.2,84.9-356.2,176.6c0,71.8,98.7,132.9,236,156C260.8,405.6,269,439,312,471c-22-49-30-78-13-118 c6.6,0,66.6,3.3,73.8,3.3c196.9,0,356.2-74.2,356.2-165.9S569.7,14.3,372.8,14.3z"/>
</svg>

Присоединяем к тексту.


blockquote.whisper {
  background: url(whisper.svg); 
  width: 25%;
  font-size: 2vw;
  color: #ccc;
  font-style: italic;
  padding: 6% 5% 15%;
}

Свойство fill у SVG должен совпадать с фоном страницы, чтобы смотрелось аккуратнее. Также используем vector-effect: non-scaling-stroke для сохранения толщины контура.

(Мысли кота) Надо захватить мир!

Третий вид облачка, используемого в комиксах, имеет сложный узор с применением стиля stroke-linejoin: miter.


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" preserveAspectRatio="none">
<defs>
<style>
	path { 
		fill: white;
		stroke: #231F20;
		stroke-width: 4;
		stroke-linejoin: miter;
		vector-effect: non-scaling-stroke;
	}
</style>
</defs>
<path d="M32.7,18.3c11,5,33.3,3.3,37-11.3 c11.7,8.7,40,11.3,54.7,0c7.3,10,36.7,13.3,46,0c0.3,8,29,16.7,39.3,11.7C202.3,27,212,40.7,229,42c-11.7,6-7.7,28.3,0,32.7 c-11,1-14.3,12.3-14.3,12.3l34.7,25.3l-12.7,2.3l36.7,21l-52.9-12.6l6.2-6.4l-28.3-16.3c0,0-14.7,14-14.3,19.3 c-10-5-36,3.7-44.3,13.3c-9.7-13.7-40.3-12.7-56-2c-7-10.3-37.7-11.7-48.7-10.7c7.2-9.7-9.3-31.7-27-35c14-5,19.7-34.3,6.7-40.7 C30.3,43.3,39.7,28,32.7,18.3z"/>
</svg>
Коты, в атаку!

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


blockquote.bubble { 
    font-size: 2.2vw;
}

Источник: the new code – Making Comic Book Speech Bubbles with SVG

Дополнительное чтение

Blambot Comic Fonts & Lettering - виды облачков в комиксах.

Вернуться в раздел SVG

Реклама