SVG это новый стандарт векторных изображений в браузере. Векторные редакторы, такие как Adobe Illustrator, позволяют напрямую сохранять графику в этом формате, а современные браузеры без проблем отображают SVG.
Поскольку SVG изображения состоят из разметки, их можно создавать и поддерживать используя ваш любимый текстовый редактор, так же, как вы поступаете с HTML. Более того, можно даже стилизовать SVG с помощью CSS, хотя вам нужно будет познакомиться с различиями между стилизацией SVG и HTML.
SVG атрибуты и CSS свойстваГрань между HTML и CSS очевидна. HTML отвечает за контент и структуру, CSS за отображение. В SVG эта грань размыта, если не сказать больше. Это главная причина того, что текстовые поля и фигуры обычно контролируются с помощью атрибутов элемента, а не CSS:
В этом примере мы рисуем прямоугольник, который закрашивается с помощью атрибута fill . Цвет и ширина внешней рамки прямоугольника задана атрибутами stroke и stroke-width . Но вы также можете стилизовать прямоугольник следующим образом, используя CSS:
Мы просто использовали атрибуты, как CSS свойства. Хотя, это работает не для всех атрибутов. Вы не сможете задать этом способом позицию и значения ширины и высоты. Мы просто будем использовать атрибут y , а также width и height .
Также как и в HTML мы можем работать с классами или идентификаторами любого элемента. Таким образом, мы определили бы представление для множества SVG элементов через стилизованный класс.
.example { fill: red; stroke: green; stroke-width: 2; }
Поскольку SVG не делает различий между областями head и body , таблицы стилей и сам контент делят между собой SVG элемент, что сопоставимо с HTML элементом.
Использование псевдоклассовВ SVG возможно использование псевдоклассов, таких как:hover , даже в содействии с CSS3 свойством transition .
.example { fill: red; stroke: green; stroke-width: 2; transition: all 2s ease; } .example:hover { fill: blue; }
Реализовав этот пример, мы увидим, что при наведении курсора на элемент, с заданным для него классом example, цвет заливки изменится с красного на синий. Чтобы все это работало как следует, не вставляйте SVG с помощью тега img . Лучше используйте embed или iframe:
При использовании тега img сам SVG отобразится корректно. Но hover -эффект и переходы будут проигнорированы. Помимо свойства transition мы также можем использовать transform . В этом случае элементы будут масштабироваться или вращаться.
.example:hover { fill: blue; transform: rotate(20deg); }
Используя CSS3, не забывайте добавлять вендорные префиксы, чтобы обеспечить поддержку как можно большего числа современных браузеров. В то время как Chrome и Firefox безупречно справляются с отрисовкой, Internet Explorer отказывается показывать ваше творение, хотя он вполне способен показать эти CSS3 свойства, если применить их к HTML.
Медиа запросы и SVGЕсли вы хотите настроить адаптацию вашего SVG под определенные разрешения, просто используйте медиа запросы, прямо внутри него:
@media only screen and (max-width: 800px) { .example { display: none; } }
В этом примере, элементы для которых задан класс example не будут показываться, как только видимая ширина экрана станет меньше 800 пикселей. Будьте внимательны, здесь говориться не о ширине документа, а о ширине элемента несущего SVG.
Перед тем как начать разговор о SVG анимации, давайте разберемся, что такое SVG.
S
calable
V
ector
G
raphics -
масштабируемая разметка в
екторной графики. Предназначена для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.
Формат SVG имеет ряд достоинств:
SVG - векторный формат, а это позволяет масштабировать изображение без потери качества.
Текст в графике SVG не является изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами.
SVG - открытый стандарт, то есть пользователь может изменить рисунок, поменяв содержание файла SVG.
Совместимость с таблицами стилей (CSS), которые используются для описания внешнего вида страниц сайтов.
Анимация реализована в SVG с помощью языка SMIL. Элементами можно управлять при помощи JavaScript.
И несколько недостатков, куда же без них:
-
Сложность использования в крупных картографических приложениях. Мелкие детали описывать слишком трудоёмко.
Чем больше в изображении мелких деталей, тем быстрее растёт размер SVG-данных.
Пример SVG кода:
Исполнение данного кода:
В даном изображении можно просто изменить параметры в коде. Для примера - картинка с изображением занимает 35.5 КБ, а код SVG - 426 байт.
И вот мы плавно подошли к разговору использования SVG-анимации (SMIL). SVG-графику можно анимировать с помощью нескольких анимационных элементов. Например, с использованием таблиц стилей CSS.
Так зачем же разработчику использовать SMIL? Есть некоторые свойства SVG, которые невозможно изменить и анимировать при помощи CSS. Например, атрибут d=””, в котором находится набор данных, определяющих форму элемента. Недостающие возможности анимации на CSS можно восполнить с помощью JavaScript. Для этого есть ряд библиотек. Это будет целесообразно, если браузер (например Opera Mini) не поддерживает SMIL анимацию.
Целевой объект анимации задается с помощью xlink:href.
Если атрибут xlink:href не задан, то целевым элементом становится родительский элемент:
Атрибут attributeName используется для указания имени атрибута, который будет анимироваться. К примеру, если нужно анимировать положение центра фигуры на оси Y, нужно задать “сy” в качестве значения атрибута attributeName.
Вот код, который позволяет анимировать движение по оси Y синего круга из предыдущего примера:
В течение 5 секунд (dur="5s"), после клика на синий круг (begin="click"), он будет двигаться по оси Y, начиная с точки from="300" в точку to="100". После выполнения - анимация остановится в конечной точке (fill="freeze"). Чтобы задать бесконечное повторение анимации, достаточно добавить атрибут repeatCount="indefinite".
Также, можно задать начало выполнения анимации после загрузки страницы. Или же подключить функцию по истечению некоторого времени после загрузки, добавить анимацию элемента страницы с задержкой после клика и тому подобное.
В действительности, SVG-анимация очень большая тема. Можно написать огромную статью с примерами кода и их выполнением, но, вместе с тем, некоторые возможности остаются недоступными. В том числе - анимация текста. Но это уже совсем другая история, исследовать которую мы будем в следующих статьях блога.
Продолжение предыдущей статьи “Стилизация SVG с помощью CSS - Часть 1”, посвященной формату векторной графики SVG.
Стилизация с помощью CSSМежду языками HTML и CSS существует четкая и ясная взаимосвязь: язык HTML предназначен для структуризации контента на странице; задача языка CSS - внешнее оформление этого контента . Формат SVG размывает четкие границы этой взаимосвязи. Например, формат версии SVG1.1 не нуждается в CSS для стилизации отдельных элементов SVG-объектов - для этой цели имеются так называемые презентационные атрибуты .
Презентационные атрибуты являются сокращениями CSS-свойств для SVG-элементов. Можно думать об этих атрибутах, как о CSS-свойствах для SVG с особым синтаксисом. К этим свойствам применима каскадность стилей, но в этой статье мы поступим более кратким способом.
Показанный ниже пример является кодом, в котором используются презентационные атрибуты для стилизации границы
многоугольника в виде пятиконечной звезды:В этом примере атрибуты
| 1 | fill |
В формате SVG2 имеются несколько презентационных атрибутов , таких как
| 1 | x |
| 1 | y |
| 1 | width |
| 1 | height |
| 1 | cx |
| 1 | cy |
Другим способом стилизации SVG-элементов является использование для этой цели CSS-свойств. Точно также, как и в случае в HTML-элементами, CSS-свойства могут быть заданы с помощью inline-стиля:
Каскады стилей SVG
Как уже говорилось ранее, презентационные атрибуты являются специальной разновидностью свойств и что они представляют из себя просто сокращение CSS-свойств, применимых к SVG-элементам. Исходя из вышесказанного, логично предположить, что к презентационным SVG-атрибутам также, как и CSS-свойствам, применимо такое понятие как каскад стилей .
Презентационные атрибуты позиционируются как “авторские стилевые правила” и могут быть переопределены любыми другими определениями: внешними таблицами стилей, внутренними таблицами стилей или же inline-стилями.
Диаграмма ниже показывает порядок расположения стилей в каскаде стилей. Чем ниже расположены стили в этой таблице, тем большим количеством вышележащих стилей они могут быть перезаписаны. В нашем случае презентационные стили могут быть переопределены почти всеми другими стилями, кроме стилей агента пользователя :
Например, представленный ниже образец кода является кругом, написанным на SVG. Цвет заливки круга в виде атрибута
с помощью правила , , и . ЗамечанияТак как презентационные атрибуты имеют XML-синтаксис, то они чувствительны к регистру . Например, при задании цвета заливки SVG-элемента атрибут должен быть записан как
в ,| 1 |
На этом все.
Updated on March 26, 2015 gearmobileЭто сам Q & A из удобного кода, с которым я пришел.
В настоящее время нет простого способа встраивания SVG-изображения, а затем доступ к элементам SVG через CSS. Существуют различные методы использования JS SVG-фреймворков, но они слишком сложны, если все, что вы делаете, это простой значок с состоянием опрокидывания.
Итак, вот что я придумал, и я считаю, что это самый простой способ использовать SVG файлы на веб-сайте. Он берет свою концепцию из ранних методов замены текста на изображение, но, насколько мне известно, никогда не было сделано для SVG.
Это вопрос:
17 ответов
Во-первых, используйте тег IMG в своем HTML, чтобы вставить SVG-графику. Я использовал Adobe Illustrator, чтобы сделать графику.
Это похоже на то, как вы вставляете обычный образ. Обратите внимание, что вам нужно установить IMG для класса svg. Класс "social-link" просто для примера. Идентификатор не требуется, но полезен.
Затем используйте этот код jQuery (в отдельном файле или встроенном в HEAD).
/* * Replace all SVG images with inline SVG */ jQuery("img.svg").each(function(){ var $img = jQuery(this); var imgID = $img.attr("id"); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); jQuery.get(imgURL, function(data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find("svg"); // Add replaced image ID to the new SVG if(typeof imgID !== "undefined") { $svg = $svg.attr("id", imgID); } // Add replaced image classes to the new SVG if(typeof imgClass !== "undefined") { $svg = $svg.attr("class", imgClass+" replaced-svg"); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr("xmlns:a"); // Replace image with new SVG $img.replaceWith($svg); }, "xml"); });
Что делает вышеприведенный код, это искать все IMG с классом "svg" и заменять его встроенным SVG из связанного файла. Массивным преимуществом является то, что он позволяет использовать CSS для изменения цвета SVG сейчас, например:
Svg:hover path { fill: red; }
Код jQuery я написал также порты по исходному идентификатору и классам изображений. Итак, этот CSS тоже работает:
#facebook-logo:hover path { fill: red; }
Social-link:hover path { fill: red; }
Svg path { fill: #000; }
$(document).ready(function() { $("img").each(function() { var $img = jQuery(this); var imgURL = $img.attr("src"); var attributes = $img.prop("attributes"); $.get(imgURL, function(data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find("svg"); // Remove any invalid XML tags $svg = $svg.removeAttr("xmlns:a"); // Loop through IMG attributes and apply on SVG $.each(attributes, function() { $svg.attr(this.name, this.value); }); // Replace IMG with SVG $img.replaceWith($svg); }, "xml"); }); });
Если вы можете включить в свою версию файлы (включая PHP или включить через ваш CMS), вы можете добавить SVG-код и включить его на свою страницу. Это работает так же, как вставка источника SVG на страницу, но делает очистку страницы более чистым.
Преимущество состоит в том, что вы можете нацелить части своего SVG с помощью CSS для зависания - не требуется javascript.
Вам просто нужно использовать правило CSS следующим образом:
#pathidorclass:hover { fill: #303 !important; }
Обратите внимание, что бит!important необходим для переопределения цвета заливки.
Теперь вы можете использовать свойство filter CSS в большинстве современных браузеров (включая Edge, но не IE11). Он работает с изображениями SVG, а также с другими элементами. Вы можете использовать hue-rotate или invert для изменения цветов, хотя они не позволяют изменять разные цвета независимо друг от друга. Я использую следующий класс CSS, чтобы показать "отключенную" версию значка (где оригинал представляет собой изображение SVG с насыщенным цветом):
Disabled { opacity: 0.4; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
Это делает его светло-серым в большинстве браузеров. В IE (и, возможно, Opera Mini, который я не тестировал), он заметно угасает с помощью свойства непрозрачности, которое по-прежнему выглядит довольно хорошо, хотя оно не серое.
Здесь приведен пример с четырьмя различными классами CSS для значка колокола Twemoji : оригинал (желтый), вышеперечисленный класс "отключен", hue-rotate (зеленый) и invert (синий).
Twa-bell { background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg"); display: inline-block; background-repeat: no-repeat; background-position: center center; height: 3em; width: 3em; margin: 0 0.15em 0 0.3em; vertical-align: -0.3em; background-size: 3em 3em; } .grey-out { opacity: 0.4; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .hue-rotate { filter: hue-rotate(90deg); -webkit-filter: hue-rotate(90deg); } .invert { filter: invert(100%); -webkit-filter: invert(100%); }
@Drew Baker дал отличное решение для решения проблемы. Код работает правильно. Тем не менее, те, кто использует AngularJs, могут найти большую зависимость от jQuery. Следовательно, я подумал, что неплохо вставить для пользователей AngularJS код, следующий за решением @Drew Baker.
Метод AngularJs одного и того же кода
1. Html: используйте тег ниже в файле html:
2. Директива: это будет директива о том, что вам нужно будет распознать тег:
"use strict"; angular.module("myApp") .directive("svgImage", ["$http", function($http) { return { restrict: "E", link: function(scope, element) { var imgURL = element.attr("src"); // if you want to use ng-include, then // instead of the above line write the bellow: // var imgURL = element.attr("ng-include"); var request = $http.get(imgURL, {"Content-Type": "application/xml"}); scope.manipulateImgNode = function(data, elem){ var $svg = angular.element(data); var imgClass = elem.attr("class"); if(typeof(imgClass) !== "undefined") { var classes = imgClass.split(" "); for(var i = 0; i < classes.length; ++i){ $svg.classList.add(classes[i]); } } $svg.removeAttribute("xmlns:a"); return $svg; }; request.success(function(data){ element.replaceWith(scope.manipulateImgNode(data, element)); }); } }; }]);
Any-class-you-wish{ border: 1px solid red; height: 300px; width: 120px }
4. Единичный тест с карма-жасмином:
"use strict"; describe("Directive: svgImage", function() { var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data; beforeEach(function() { module("myApp"); inject(function($injector) { $rootScope = $injector.get("$rootScope"); $compile = $injector.get("$compile"); $httpBackend = $injector.get("$httpBackend"); apiUrl = $injector.get("apiUrl"); }); scope = $rootScope.$new(); element = angular.element(""); element = $compile(element)(scope); spyOn(scope, "manipulateImgNode").andCallThrough(); $httpBackend.whenGET(apiUrl + "me").respond(200, {}); data = "" + "" + "" + "" + "" + "" + "" + "" + "" + "" + ""; $httpBackend.expectGET("/icons/icon-man.svg").respond(200, data); }); afterEach(function() { $httpBackend.verifyNoOutstandingExpectation(); $httpBackend.verifyNoOutstandingRequest(); }); it("should call manipulateImgNode atleast once", function () { $httpBackend.flush(); expect(scope.manipulateImgNode.callCount).toBe(1); }); it("should return correct result", function () { $httpBackend.flush(); var result = scope.manipulateImgNode(data, element); expect(result).toBeDefined(); }); it("should define classes", function () { $httpBackend.flush(); var result = scope.manipulateImgNode(data, element); var classList = ["svg"]; expect(result.classList).toBe(classList); }); });
Я понимаю, что вы хотите выполнить это с помощью CSS, но просто напоминание на случай, если это маленький, простой образ - вы всегда можете открыть его в Notepad++ и изменить путь /whatelement fill:
Это могло бы сэкономить массу уродливого сценария. Извините, если это вне базы, но иногда простые решения можно упустить.
Даже замена нескольких изображений svg может быть меньше по размеру, чем некоторые фрагменты кода для этого вопроса.
Я написал директиву для решения этой проблемы с помощью AngularJS. Доступно .
Он заменяет элемент SVG после его рендеринга и помещает его внутри элемента div , что делает его CSS легко изменчивым. Это помогает использовать один и тот же файл SVG в разных местах, используя разные размеры/цвета.
Использование прост:
После этого вы можете легко:
Svg-class svg { fill: red; // whichever color you want }
Здесь нет кода рамки, только чистый js:
Document.querySelectorAll("img.svg").forEach(function(element) { var imgID = element.getAttribute("id") var imgClass = element.getAttribute("class") var imgURL = element.getAttribute("src") xhr = new XMLHttpRequest() xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { var svg = xhr.responseXML.getElementsByTagName("svg"); if(imgID != null) { svg.setAttribute("id", imgID); } if(imgClass != null) { svg.setAttribute("class", imgClass + " replaced-svg"); } svg.removeAttribute("xmlns:a") if(!svg.hasAttribute("viewBox") && svg.hasAttribute("height") && svg.hasAttribute("width")) { svg.setAttribute("viewBox", "0 0 " + svg.getAttribute("height") + " " + svg.getAttribute("width")) } element.parentElement.replaceChild(svg, element) } } xhr.open("GET", imgURL, true) xhr.send(null) })
Здесь версия для knockout.js на основе принятого ответа:
Важно: Это действительно требует jQuery для замены, но я подумал, что это может быть полезно для некоторых.
Ko.bindingHandlers.svgConvert = { "init": function () { return { "controlsDescendantBindings": true }; }, "update": function (element, valueAccessor, allBindings, viewModel, bindingContext) { var $img = $(element); var imgID = $img.attr("id"); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); $.get(imgURL, function (data) { // Get the SVG tag, ignore the rest var $svg = $(data).find("svg"); // Add replaced image ID to the new SVG if (typeof imgID !== "undefined") { $svg = $svg.attr("id", imgID); } // Add replaced image classes to the new SVG if (typeof imgClass !== "undefined") { $svg = $svg.attr("class", imgClass + " replaced-svg"); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr("xmlns:a"); // Replace image with new SVG $img.replaceWith($svg); }, "xml"); } };
Затем просто примените data-bind="svgConvert: true" к вашему тегу img.
Это решение полностью заменяет тег img SVG, и любые дополнительные привязки не будут соблюдаться.
Существует библиотека с открытым исходным кодом под названием SVGInject, которая использует атрибут onload для запуска инъекции. Проект GitHub можно найти на странице https://github.com/iconfu/svg-inject
Ниже приведен минимальный пример использования SVGInject:
После загрузки изображения onload="SVGInject(this) вызовет инъекцию, а элемент будет заменен содержимым SVG файла, указанного в атрибуте src .
Он решает несколько проблем с инъекцией SVG:
SVG можно скрыть до завершения инъекции. Это важно, если стиль уже применяется во время загрузки, что в противном случае могло бы привести к кратковременной "вспышке без использования содержимого".
Элементы автоматически внедряют их. Если вы добавляете SVG динамически, вам не придется беспокоиться о вызове функции впрыска снова.
Случайная строка добавляется к каждому идентификатору в SVG, чтобы избежать повторения одного и того же ID в документе, если SVG вводится несколько раз.
SVGInject - это простой Javascript и работает со всеми браузерами, поддерживающими SVG.
Если у нас есть большее количество таких svg-изображений, мы также можем воспользоваться файлами-шрифтами.
Такие сайты, как https://glyphter.com/ , могут получить файл шрифтов из наших svgs.
например.
@font-face { font-family: "iconFont"; src: url("iconFont.eot"); } #target{ color: white; font-size:96px; font-family:iconFont; }
Поскольку SVG - это в основном код, вам нужно просто содержимое. Я использовал PHP для получения контента, но вы можете использовать все, что захотите.
Затем я печатал содержимое "как есть" внутри контейнера div
Чтобы финализировать правило для контейнеров SVG childs на CSS
Fill-class > svg { fill: orange; }
Я получил эти результаты с помощью значка материала SVG:
Выбранное решение прекрасно, если вы хотите, чтобы jQuery обрабатывал все элементы svg в вашей DOM, а ваш DOM был разумного размера. Но если ваш DOM большой, и вы решите загружать части своего DOM динамически, действительно нет смысла пересканировать всю DOM только для обновления элементов svg. Вместо этого используйте плагин jQuery для этого:
/** * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents. * * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element). * * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object"s * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place * any styles in a style class instead. */ (function ($) { $.fn.svgLoader = function () { var src = $(this).attr("src"); var width = this.attr("width"); var height = this.attr("height"); var cls = this.attr("class"); var ctx = $(this); // Get the svg file and replace the element. $.ajax({ url: src, cache: false }).done(function (html) { let svg = $(html); svg.attr("width", width); svg.attr("height", height); svg.attr("class", cls); var newHtml = $("").append(svg.clone()).html(); ctx.replaceWith(newHtml); }); return this; }; }(jQuery));
В html укажите элемент svg следующим образом.
