Оптимизация кода всегда является вечной потребностью программистов, и разумное использование изображений SVG для замены некоторых изображений в PNG/JPG и других форматах является важной частью оптимизации интерфейса. Поскольку это оптимизация, давайте сначала посмотрим на нее. SVG-изображения. В чем преимущества:
SVG можно читать и изменять с помощью многих инструментов (например, Блокнота).
Несколько небольших примеров изображений SVG:
Давайте посмотрим на код третьего значка общего доступа:
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <gstroke=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235stroke-linejoin=round/> <path d=M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
У студентов, которые не понимают SVG, сейчас на лицах должны быть вопросительные знаки, как и в первый раз, когда я встретил их. Не волнуйтесь, давайте начнем с основ.
Что такое СВГ?SVG — это формат изображений, основанный на синтаксисе XML, его полное название — Масштабируемая векторная графика. Другие форматы изображений основаны на обработке пикселей, а SVG — это описание формы изображения, поэтому по сути это текстовый файл небольшого размера, который не будет искажаться независимо от того, сколько раз его увеличивать. Кроме того, SVG является стандартом Консорциума World Wide Web, а SVG интегрирован со стандартами W3C, такими как DOM и XSL.
Как использовать?В HTML5 вы можете встраивать элементы SVG непосредственно в HTML-страницы, например маленькое красное сердечко выше:
<body> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <rect id=ay=54 ширина=60 высота=25 rx=1/> <mask id=bx=0 y=0 ширина=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g Transform=translate(-9 -56) fill=none fill-rule=evenodd> <usestroke= #EDEEEF маска=url(#b) штрих-ширина=2 xlink:href=#a/> <path d=M19.05 62.797c-.208-.268-1,776-2,188-3,629-1,725-.662,165-1,439,44-2,009 1,463-2,18 3,913 4,965 8,983 5,615 9.433В72л.023-.016.023.016в-.032с.65-.45 7.795-5,52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z fill=red/> </g> </svg></body>
Код SVG также можно записать в файл, заканчивающийся на .svg, а затем вставить на веб-страницу с помощью таких тегов, как <img> , <object> , <embed> и <iframe> .
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
CSS также может использовать svg
.logo {фон: URL(logo.svg);}Файлы SVG также можно преобразовать в кодировку BASE64, а затем записать на веб-страницы в виде URI данных.
<img src=data:image/svg+xml;base64,[данные]>Синтаксис SVG
1. Тег <svg>
Код SVG размещается в теге верхнего уровня <svg> . Ниже приведен пример.
<svg width=100% height=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
Атрибуты ширины и высоты <svg> определяют ширину и высоту, которую изображение SVG занимает в элементе HTML. Помимо относительных единиц, также можно использовать абсолютные единицы (единица измерения: пиксель). Если эти два атрибута не указаны, размер изображения SVG по умолчанию составляет 300 пикселей (ширина) x 150 пикселей (высота).
Если вы хотите отображать только часть изображения SVG, укажите атрибут viewBox.
<svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
Значение атрибута <viewBox> имеет четыре числа, которые представляют собой абсциссу и ординату верхнего левого угла, ширину и высоту области просмотра. В приведенном выше коде изображение SVG имеет ширину 100 пикселей и высоту 100 пикселей, а атрибут viewBox указывает, что область просмотра начинается с точки (50, 50). Итак, на самом деле вы видите четверть круга в правом нижнем углу.
Обратите внимание, что область просмотра должна вписываться в пространство, в котором она находится. В приведенном выше коде размер области просмотра составляет 50 x 50. Поскольку размер изображения SVG составляет 100 x 100, область просмотра будет увеличена до размера изображения SVG, то есть она будет увеличена в четыре раза. .
Если вы не укажете атрибут ширины и атрибут высоты и укажете только атрибут viewBox, это эквивалентно указанию только соотношения сторон изображения SVG. В этом случае размер SVG-изображения по умолчанию будет равен размеру содержащегося в нем HTML-элемента.
2. Тег <circle>
Тег <circle> представляет круг.
<svg width=300 height=180> <circle cx=30 cy=50 r=25 /> <circle cx=90 cy=50 r=25 class=red /> <circle cx=150 cy=50 r=25 class =фантазия /></svg>
Приведенный выше код определяет три круга. Атрибуты cx, cy и r тега <circle> — это абсцисса, ордината и радиус соответственно, а единица измерения — пиксели. Координаты указаны относительно начала верхнего левого угла холста <svg> .
Атрибут class используется для указания соответствующего класса CSS.
.red { заливка: красный;}.fancy { заливка: нет; обводка: черная; ширина обводки: 3 пт;}Свойства CSS SVG отличаются от свойств веб-элементов.
заливка: цвет заливки
обводка: цвет обводки
Stroke-width: ширина границы
3. Тег <line>
Тег <line> используется для рисования прямых линий.
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style=stroke:rgb(0,0,0);stroke-width:5 /></svg>
В приведенном выше коде атрибут x1 и атрибут y1 тега <line> представляют координаты по оси абсцисс и ординат начальной точки сегмента линии; атрибут x2 и атрибут y2 представляют координаты по оси абсцисс и ординат конечной точки; сегмент линии; атрибут стиля представляет стиль сегмента линии;
4. Тег <polyline>
Тег <polyline> используется для рисования ломаной линии.
<svg width=300 height=180> <polyline Points=3,3 30,28 3,53 fill=none Stroke=black /></svg>
Атрибут точек <polyline> определяет координаты каждой конечной точки. Абсцисса и ордината разделяются запятыми, а точки разделяются пробелами.
5. Тег <rect>
Тег <rect> используется для рисования прямоугольников.
<svg width=300 height=180> <rect x=0 y=0 height=100 width=200 style=stroke: #70d5dd; fill: #dd524b /></svg>
Атрибуты x и y <rect> определяют координаты абсцисс и ординат конечной точки верхнего левого угла прямоугольника. Атрибуты width и height определяют ширину и высоту (единичные пиксели) прямоугольника.
6. Тег <ellipse>
Тег <ellipse> используется для рисования эллипсов.
<svg width=300 height=180> <ellipse cx=60 cy=60 ry=40 rx=20 штрих=черный штрих-ширина=5 fill=silver/></svg>
Атрибуты cx и cy <ellipse> определяют координаты по оси абсцисс и ординат центра эллипса (единичный пиксель); атрибуты rx и ry определяют радиус поперечной и продольной осей эллипса (единичный пиксель).
7. Тег <polygon>
Тег <polygon> используется для рисования многоугольников.
<svg width=300 height=180> <polygon fill=зеленый штрих=оранжевый штрих-ширина=1 точек=0,0 100,0 100,100 0,100 0,0/></svg>
Атрибут точек <polygon> определяет координаты каждой конечной точки. Абсцисса и ордината разделяются запятыми, а точки разделяются пробелами.
8. Тег <path>
Тег <path> используется для указания пути.
<svg ширина=300 высота=180><путь d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></path></svg >
Атрибут d <path> представляет порядок рисования. Его значение представляет собой длинную строку. Каждая буква представляет действие рисования, за которым следуют координаты.
М: перейти (переместить)
L: Нарисуйте прямую линию до (lineto)
Z: закрытый путь
9. Тег <text>
Тег <text> используется для рисования текста.
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
Атрибуты x и y <text> представляют абсциссу и ординату начальной точки базовой линии текстового блока. Стиль текста можно указать с помощью атрибутов класса или стиля.
10. Тег <use>
Тег <use> используется для копирования фигуры.
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=white Stroke=blue /></svg>
Атрибут href <use> указывает узел, который нужно скопировать, а атрибуты x и y — это координаты верхнего левого угла <use> . Кроме того, вы также можете указать координаты ширины и высоты.
11. Тег <g>
Тег <g> используется для группировки нескольких фигур в группу для удобства повторного использования.
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white Stroke=blue /></svg>
12. Тег <defs>
Тег <defs> используется для пользовательских фигур. Код внутри него не отображается и предназначен только для справки.
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>круг</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white Stroke=blue /></svg>
13. Тег <pattern>
Тег <pattern> используется для настройки формы, на которую можно ссылаться для мозаики области.
<svg width=500 height=500> <defs> <pattern id=dots x=0 y=0 width=100 height=100 PatternUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <rect x=0 y=0 ширина=100% высота=100% fill=url(#dots) /></svg>
В приведенном выше коде тег <pattern> определяет круг как узор из точек. patternUnits=userSpaceOnUse означает, что ширина и длина <pattern> являются фактическими значениями пикселей. Затем назначьте этот режим для заполнения нижнего прямоугольника.
14. Тег <image>
Тег <image> используется для вставки файлов изображений.
<svg viewBox=0 0 100 100 ширина=100 высота=100> <image xlink:href=path/to/image.jpg ширина=50% высота=50%/></svg>
В приведенном выше коде атрибут xlink:href <image> указывает источник изображения.
15. Тег <animate>
Тег <animate> используется для создания анимационных эффектов.
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animate AttributeName=x from=0 to=500 dur=2s restartCount=indefinite /> </rect ></svg>
В приведенном выше коде прямоугольник продолжит двигаться и создавать анимационные эффекты.
Атрибуты <animate> имеют следующие значения.
атрибутName: имя атрибута, в котором возникает эффект анимации.
from: Начальное значение отдельной анимации.
to: конечное значение отдельной анимации.
dur: продолжительность одной анимации.
повторениеCount: режим цикла анимации.
Анимацию можно определить для нескольких свойств.
<animate атрибутName=x от=0 до=500 длительность=2 с повторениеCount=неопределенный /><animate атрибутName=ширина до=500 длительность=2 с повторениеCount=неопределенный />
16. Тег <animateTransform>
Тег <animate> не влияет на атрибут преобразования CSS. Если требуется преобразование, необходимо использовать тег <animateTransform>.
<svg width=500px height=500px> <rect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransform атрибутName=transform type=rotate start=0s dur=10s from=0 200 200 to=360 400 400 повторениеCount=indefinite /> </rect></svg>
В приведенном выше коде эффектом <animateTransform> является вращение. При этом значения атрибута from и to имеют три числа. Первое число — это значение угла, а второе и третье значения — координаты. центр вращения. from=0 200 200 означает, что в начале угол равен 0, и вращение начинается около (200, 200); to=360 400 400 означает, что в конце угол равен 360, и вращение начинается около (400); , 400).
1. DOM-операции
Если код SVG написан непосредственно на веб-странице HTML, он становится частью DOM веб-страницы, и им можно напрямую управлять с помощью DOM.
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 saveAspectRatio=xMidYMid meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
После того, как приведенный выше код вставлен на веб-страницу, вы можете использовать CSS для настройки стиля.
круг {ширина штриха: 5; штрих: # f00; заливка: # ff0;} круг: наведение {штрих: # 090; заливка: # f8f8f8;}Затем SVG можно манипулировать с помощью кода JavaScript.
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('клик по кругу - увеличение'); mycircle.setAttribute('r', 60);}, ЛОЖЬ);Приведенный выше код указывает, что при щелчке по изображению атрибут r элемента круга будет перезаписан.
2. Получите SVG DOM
Используйте теги <object> , <iframe> , <embed> для вставки файлов SVG и получения SVG DOM.
вар svgObject = document.getElementById('object').contentDocument; вар svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();Обратите внимание: если вы используете тег <img> для вставки файла SVG, вы не сможете получить SVG DOM.
3. Прочтите исходный код SVG.
Поскольку файл SVG представляет собой часть текста XML, исходный код SVG можно прочитать, прочитав код XML.
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve width=500 height=440 > <!-- код svg --> </svg></div>
Используйте методserializeToString() экземпляра XMLSerializer, чтобы получить код элемента SVG.
var svgString = новый XMLSerializer() .serializeToString(document.querySelector('svg'));4. Преобразуйте изображение SVG в изображение Canvas.
Во-первых, вам необходимо создать новый объект Image и присвоить изображение SVG атрибуту src объекта Image.
var img = new Image();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL || self; вар URL = DOMURL.createObjectURL(svg);img.src = URL; Затем, когда изображение загрузится, нарисуйте его в элементе <canvas> .
img.onload = function () { var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d'); краткое содержаниеSVG может сделать гораздо больше. Позже мы подробно объясним эффекты анимации и текстовые эффекты, созданные с помощью SVG, но сегодня остановимся на этом.
console.log('右下角点好看呦')Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат Script Home.