SVG и JavaScript для создания изображений

Здесь приведены примеры изображений, которые можно создавать с использованием JavaScript. Изображения генерируются автоматически с учетом указанных Вами параметров. Для создания изображений используется скрипт ImgPlaceholder.min.js. Изображение получается в формате svg. Но, если его выделить и скопировать, то можно вставить в любой графический редактор, а затем сохранить в нужном вам формате. Но, основное назначение таких изображений в другом: автоматическая генерация при загрузке страницы сайта с нужными вам параметрами и значениями. Важный момент - изображение легко интегрируется в адаптивные шаблоны.

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

< img data-imgplaceholder width='100%' height='70'/>

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

 < img data-imgplaceholder data-label="Ваша надпись" 
data-border-width="20" data-border-color="#b01e00" 
data-bgcolor="#f3b200" data-forecolor="#b01e00" width="100%" height="70" />

Результат выполнения приведен ниже:
Следующий пример кода:

< img data-imgplaceholder data-forecolor="#333" 
data-bgcolor="#00c13f" width="100%" height="70" />

И результат:
Следующий пример:

< img data-imgplaceholder data-border-color="#e34c26" 
data-label="HTML5, SVG and JavaScript" data-forecolor="#e34c26" 
data-bgcolor="#f6f6f6" width="100%" height="70" />

Результат: И последний пример настройки:

 < img data-imgplaceholder data-forecolor="#333" 
data-border-width="20" data-bgcolor="#00c13f" width="100%" height="70" />

Результат:

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