Есть ли способ, как я могу создать небольшую графику, используя векторный рисунок на веб-странице?

Question

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

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

Answer 1

Сделайте белое изображение (gif | png) с прозрачным отверстием в нем, сделайте отверстие в форме галочки.

Теперь установите цвет фона изображения на то, что вам нужно.

---

Если подумать иначе, в большинстве современных шрифтов Unicode есть две галочки: 0x2714 и 0x2713

* 1007.* ✓ - Тонкая отметка используется ✓ на html-странице

✔ - Толстая отметка ✔

Я не могу получить ТАК, чтобы показать их в цвете, но вы должны быть в состояниираскрасьте их как вам нужно.

Answer 2

SVG - это W3C-определенный формат для векторной графики. Internet Explorer поддерживает его с версии 9.

Answer 3

Вы могли бы:

1. Используйте холст HTML5, чтобы нарисовать иконку с помощью JavaScript, или
2. Используйте серверный скрипт для генерации .png или .svg, используя соответствующие библиотеки для вашего языка.