1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <svg> <symbol viewBox="0 0 611.989 611.988"> <g> <g> <g> <path d="M305.994,417.769c-30.85,0-55.887,25.037-55.887,55.887s25.038,55.887,55.887,55.887s55.887-25.037,55.887-55.887 S336.843,417.769,305.994,417.769z M605.436,222.369C530.697,133.434,421.549,82.446,305.994,82.446 S81.309,133.434,6.551,222.369c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.587,6.558,17.939,6.558 c7.973,0,15.891-3.391,21.423-9.967c64.084-76.248,157.639-119.989,256.652-119.989c99.013,0,192.568,43.741,256.651,119.971 c5.533,6.576,13.45,9.967,21.424,9.967c6.353,0,12.724-2.143,17.958-6.558C613.837,251.802,615.366,234.161,605.436,222.369z M305.994,194.22c-82.545,0-160.489,36.419-213.879,99.926c-9.929,11.811-8.402,29.434,3.428,39.363 c5.234,4.396,11.605,6.558,17.958,6.558c7.973,0,15.891-3.391,21.405-9.967c42.716-50.838,105.086-79.993,171.089-79.993 c66.003,0,128.372,29.155,171.107,79.993c5.533,6.595,13.45,9.967,21.404,9.967c6.353,0,12.724-2.143,17.959-6.558 c11.829-9.929,13.356-27.57,3.428-39.363C466.483,230.64,388.539,194.22,305.994,194.22z M305.994,305.994 c-49.553,0-96.331,21.852-128.335,59.948c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.605,6.557,17.958,6.557 c7.973,0,15.891-3.39,21.405-9.966c21.368-25.429,52.552-40.016,85.544-40.016s64.177,14.587,85.544,40.016 c5.533,6.595,13.45,9.966,21.405,9.966c6.353,0,12.724-2.142,17.958-6.557c11.83-9.93,13.357-27.553,3.428-39.363 C402.324,327.846,355.546,305.994,305.994,305.994z"/> </g> </g> </g> </symbol> </svg> <div> <div> <svg> <use xlink:href="#icon1"></use> </svg> </div> <div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium. </div> </div> <div> <div> <svg> <use xlink:href="#icon1"></use> </svg> </div> <div> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium. </div> </div> |
Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS.Вставка SVG в HTML
SVG через тег img
SVG data URI / base64
SVG через тег object
Вставка SVG через CSSSVG через свойство background
SVG через тег img
<img src="myImage.svg" alt="myImage">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<g>
<path d="M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h2v2c0,0.553,0.447,1,1,1h6
c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49
c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5h40z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808
c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15
C42,31.49,37.855,37.214,31.688,39.242z"/>
<path d="M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z"/>
<path d="M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S51.553,24,51,24z"/>
<path d="M7,24h4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S7.553,24,7,24z"/>
<path d="M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z"/>
<path d="M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z"/>
<path d="M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293
s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z"/>
<path d="M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828
c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z"/>
<path d="M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1
S27.553,13,27,13z"/>
</g>
</svg>
SVG data URI / base64
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh3NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
Закодированное SVG изображение будет начинаться с:
data: image/svg+xml; utf8; base64,
SVG через тег object
<object type="image/svg+xml" data="myImage.svg"></object>
SVG через тег embed
<embed src="myImage.svg"></embed>
SVG через свойство background
.svg-background {
width: 80px;
height: 80px;
background: url('idea.svg') no-repeat center;
}
Inline SVG CSS background
.svg-inline-css {
background: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cg%3E%3Cpath d='M27,8c-9.374,0-17,7.626-17,17c0,7.112,4.391,13.412,11,15.9V50c0,0.553,0.447,1,1,1h2v2c0,0.553,0.447,1,1,1h6 c0.553,0,1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1v-9.1c6.609-2.488,11-8.788,11-15.9C44,15.626,36.374,8,27,8z M30,49 c-0.553,0-1,0.447-1,1v2h-4v-2c0-0.553-0.447-1-1-1h-1v-5h8v5h40z M31.688,39.242C31.277,39.377,31,39.761,31,40.192V42h-8v-1.808 c0-0.432-0.277-0.815-0.688-0.95C16.145,37.214,12,31.49,12,25c0-8.271,6.729-15,15-15s15,6.729,15,15 C42,31.49,37.855,37.214,31.688,39.242z'/%3E%3Cpath d='M27,6c0.553,0,1-0.447,1-1V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v4C26,5.553,26.447,6,27,6z'/%3E%3Cpath d='M51,24h-4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S51.553,24,51,24z'/%3E%3Cpath d='M7,24h4c-0.553,0-1,0.447-1,1s0.447,1,1,1h5c0.553,0,1-0.447,1-1S7.553,24,7,24z'/%3E%3Cpath d='M43.264,7.322l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S43.654,6.932,43.264,7.322z'/%3E%3Cpath d='M12.15,38.436l-2.828,2.828c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293l2.828-2.828c0.391-0.391,0.391-1.023,0-1.414S12.541,38.045,12.15,38.436z'/%3E%3Cpath d='M41.85,38.436c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l2.828,2.828c0.195,0.195,0.451,0.293,0.707,0.293 s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L41.85,38.436z'/%3E%3Cpath d='M12.15,11.564c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414l-2.828-2.828 c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L12.15,11.564z'/%3E%3Cpath d='M27,13c-6.617,0-12,5.383-12,12c0,0.553,0.447,1,1,1s1-0.447,1-1c0-5.514,4.486-10,10-10c0.553,0,1-0.447,1-1 S27.553,13,27,13z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
width: 80px; height: 80px; background-size: 80px;
}
Свойство background будет начинаться с
data: image/svg+xml, %3Csvg
SVG data URI / base64
.svg-base64-CSS {
background-image: url("data:image/svg+xml; utf8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTI3LDhjLTkuMzc0LDAtMTcsNy42MjYtMTcsMTdjMCw3LjExMiw0LjM5MSwxMy40MTIsMTEsMTUuOVY1MGMwLDAuNTUzLDAuNDQ3LDEsMSwxaDF2MmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDYgICBjMC41NTMsMCwxLTAuNDQ3LDEtMXYtMmgxYzAuNTUzLDAsMS0wLjQ0NywxLTF2LTkuMWM2LjYwOS0yLjQ4OCwxMS04Ljc4OCwxMS0xNS45QzQ0LDE1LjYyNiwzNi4zNzQsOCwyNyw4eiBNMzAsNDkgICBjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MmgtNHYtMmMwLTAuNTUzLTAuNDQ3LTEtMS0xaC0xdi01aDh3NUgzMHogTTMxLjY4OCwzOS4yNDJDMzEuMjc3LDM5LjM3NywzMSwzOS43NjEsMzEsNDAuMTkyVjQyaC04di0xLjgwOCAgIGMwLTAuNDMyLTAuMjc3LTAuODE1LTAuNjg4LTAuOTVDMTYuMTQ1LDM3LjIxNCwxMiwzMS40OSwxMiwyNWMwLTguMjcxLDYuNzI5LTE1LDE1LTE1czE1LDYuNzI5LDE1LDE1ICAgQzQyLDMxLjQ5LDM3Ljg1NSwzNy4yMTQsMzEuNjg4LDM5LjI0MnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0yNyw2YzAuNTUzLDAsMS0wLjQ0NywxLTFWMWMwLTAuNTUzLTAuNDQ3LTEtMS0xcy0xLDAuNDQ3LTEsMXY0QzI2LDUuNTUzLDI2LjQ0Nyw2LDI3LDZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNTEsMjRoLTRjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzUxLjU1MywyNCw1MSwyNHoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik03LDI0SDNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFzMC40NDcsMSwxLDFoNGMwLjU1MywwLDEtMC40NDcsMS0xUzcuNTUzLDI0LDcsMjR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNNDMuMjY0LDcuMzIybC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzQzLjY1NCw2LjkzMiw0My4yNjQsNy4zMjJ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8cGF0aCBkPSJNMTIuMTUsMzguNDM2bC0yLjgyOCwyLjgyOGMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2wyLjgyOC0yLjgyOGMwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0UzEyLjU0MSwzOC4wNDUsMTIuMTUsMzguNDM2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTQxLjg1LDM4LjQzNmMtMC4zOTEtMC4zOTEtMS4wMjMtMC4zOTEtMS40MTQsMHMtMC4zOTEsMS4wMjMsMCwxLjQxNGwyLjgyOCwyLjgyOGMwLjE5NSwwLjE5NSwwLjQ1MSwwLjI5MywwLjcwNywwLjI5MyAgIHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjM5MS0wLjM5MSwwLjM5MS0xLjAyMywwLTEuNDE0TDQxLjg1LDM4LjQzNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTxwYXRoIGQ9Ik0xMi4xNSwxMS41NjRjMC4xOTUsMC4xOTUsMC40NTEsMC4yOTMsMC43MDcsMC4yOTNzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMC4zOTEtMC4zOTEsMC4zOTEtMS4wMjMsMC0xLjQxNGwtMi44MjgtMi44MjggICBjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBzLTAuMzkxLDEuMDIzLDAsMS40MTRMMTIuMTUsMTEuNTY0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPHBhdGggZD0iTTI3LDEzYy02LjYxNywwLTEyLDUuMzgzLTEyLDEyYzAsMC41NTMsMC40NDcsMSwxLDFzMS0wLjQ0NywxLTFjMC01LjUxNCw0LjQ4Ni0xMCwxMC0xMGMwLjU1MywwLDEtMC40NDcsMS0xICAgUzI3LjU1MywxMywyNywxM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
width: 80px; height: 80px; background-size: 80px;
}
Будет начинаться с
data: image/svg+xml; utf8; base64,
<svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#ok"></use> </svg> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#smile"></use> </svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000"> <symbol viewBox="0 0 40 40"> <path d="M34.141 18.906h-5.222a28.538 28.538 0 0 0 1.283-5.4c.452-3.004-1.616-5.805-4.62-6.258a5.437 5.437 0 0 0-.816-.061c-.647 0-1.172.525-1.172 1.172 0 2.831-1.627 7.105-3.526 8.057a51.1687 51.1687 0 0 1-7.179 2.49h2.172c-.647 0-1.172.525-1.172 1.172v16.406c0 .647.525 1.172 1.172 1.172h4.515v1.172c0 .647.525 1.172 1.172 1.172h20.7c1.39-.002 2.648-.82 3.213-2.09l8.222 2.055c.093.023.188.035.284.035h7.031c1.942 0 3.516-1.574 3.516-3.516 0-.443-.084-.883-.247-1.295 1.528-.419 2.589-1.807 2.591-3.392a3.489 3.489 0 0 0-.248-1.3c4.344-2.591 1.688-3.966 2.594-8.075.418-1.895-1.574-3.514-3.515-3.516zM4.687 35.312h3.344V21.25h3.343v14.062zm7.188 1.172c-.001.647-.525 1.171-1.172 1.172H7.031V21.25h5.844v15.234zm22.334-8.203a.771.771 0 0 1-.068 0h-7.032c-.647.001-1.171.527-1.169 1.175.001.645.524 1.168 1.169 1.169h41.8c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-4.688c-.647.019-1.156.558-1.138 1.205.018.621.517 1.12 1.138 1.138h3.344c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-6.887l-8.347-2.087v-14.6a48.0595 48.0595 0 0 0 6.9-2.456c2.692-1.349 4.34-5.617 4.73-8.788 1.409.517 2.26 1.954 2.036 3.438a18.9356 18.9356 0 0 1-1.823 6.393c-.292.578-.06 1.283.518 1.574.164.083.346.126.53.126h7.032c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-7.032c-.646.045-1.132.606-1.087 1.251.041.581.502 1.044 1.083 1.087h7.032c.647-.019 1.187.491 1.205 1.138.019.647-.49 1.186-1.137 1.205zM25.903 4.878c.647.019 1.187-.49 1.206-1.137a.771.771 0 0 0 0-.068v-2.5c0-.647-.524-1.171-1.171-1.172-.647 0-1.172.525-1.172 1.172v2.5c-.019.646.49 1.186 1.137 1.205zm-9.909 1.054l1.657 1.658c.458.458 1.2.457 1.658 0 .458-.458.457-1.2-.001-1.658l-1.657-1.657c-.447-.468-1.189-.486-1.657-.039s-.486 1.189-.039 1.657c.012.013.026.026.039.039zm2.075 7.832c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h3.5c.647.02 1.187-.49 1.205-1.137zm21.19 0c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h3.5c.646.02 1.186-.49 1.205-1.137zM34.39 7.57l1.658-1.657c.458-.458.457-1.2 0-1.658-.458-.458-1.2-.457-1.658.001l-1.657 1.657c-.468.447-.486 1.189-.039 1.657s1.189.486 1.657.039c.013-.013.027-.026.039-.039z"/> </symbol> <symbol viewBox="0 0 40 40"> <path d="M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20C39.987 8.96 31.04.013 20 0zm0 38.008c-9.946 0-18.008-8.062-18.008-18.008S10.054 1.992 20 1.992 38.008 10.054 38.008 20C37.996 29.941 29.941 37.996 20 38.008zm-3.867-20.365A4.9338 4.9338 0 0 0 12 15a5.37 5.37 0 0 0-4.405 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.4645 3.4645 0 0 1 12 17c1.153-.14 2.284.395 2.906 1.376.213.332.656.429.988.215a.7143.7143 0 0 0 .239-.948zm16.272 0A5.37 5.37 0 0 0 28 15a4.9338 4.9338 0 0 0-4.133 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.0108 3.0108 0 0 1 28 17c1.229-.142 2.44.383 3.178 1.376.213.332.656.429.988.216a.7158.7158 0 0 0 .239-.949zm-1.7 6.153a.6874.6874 0 0 0-1.011 0c-1.185 1.526-6.317 3.213-9.695 3.2-3.359-.008-8.345-1.941-9.7-3.2-.29-.25-.72-.25-1.01 0-.279.277-.28.728-.003 1.007l.003.003c6.042 5.591 15.37 5.591 21.412 0 .277-.277.279-.726.005-1.006l-.001-.004zm-6.785 6.859a.715.715 0 0 0-.878-.501c-.001 0-.002 0-.003.001-1.988.558-4.092.558-6.08 0-.38-.107-.775.115-.882.495-.107.38.115.775.495.882C17.7 31.85 18.847 33 20 33s2.305-1.15 3.426-1.464c.38-.106.602-.5.495-.88v-.001h-.001z"/> </symbol> </svg>
SVG — технология, которая позволяет отображать векторную графику на сайте (графика, которая не меняет качество при изменения размеров).
SVG можно подключать тремя способами. Первый, это подключить напрямую на HTML-странице между тегами <svg>
.
<svg> <circle cx='30' cy='30' r='30' fill='green'> </svg>
Пример на JSFiddle
Второй способ, это создать отдельный файл с расширением SVG, и подключить в теге <img>
.
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- код SVG --> </svg>
Третий способ, это прописать SVG через Data URI. Этот способ удобен, если не надо создавать отдельный файл для маленькой картинки.
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='5' fill='green' /></svg>">
Пример на JSFiddle
SVG-картинки можно вставлять как фон объектов через CSS.
.logo { background: url(image.svg); }
Давайте начнем наше погружение с простого примера. Посмотрите на код, представленный ниже:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg>
Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox: нажмите сюда):
Процесс отображения включает следующее:
svg
: version
и baseProfile
. Но в SVG 2 оба эти атрибута version
и baseProfile
обрели статус не рекомендованных<rect/>
, который покрывает всю область изображения<circle/>
с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещен на 150px вправо, и 100px вниз).Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.
Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на вебсервере, в корректной работе которого вы уверены (смотри ниже).
Теперь, когда вы имеете представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Вебсервер. Но на этом этапе существуют некоторые подводные камни. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:
Content-Type: image/svg+xml Vary: Accept-Encoding
Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:
Content-Type: image/svg+xml Content-Encoding: gzip Vary: Accept-Encoding
Вы можете проверить, правильные ли заголовки HTTP посылает ваш сервер с файлами SVG, используя Network Monitor panel или сайт, такой как web-sniffer.net. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше - вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри server configuration page на странице SVG wiki о ряде простых решений.
Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедитесь, что вы проверили конфигурацию вашего сервера. Если ваш сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.
<div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol viewBox="0 0 17 32"> <g> <line x1="16" y1="16" x2="1" y2="31"/> <path d="M1,1"/> <line x1="1" y1="1" x2="16" y2="16"/> </g> </symbol> <symbol viewBox="0 0 17 32"> <g> <line x1="1" y1="16" x2="16" y2="1"/> <path d="M16,31"/> <line x1="16" y1="31" x2="1" y2="16"/> </g> </symbol> </svg> </div>
<svg> <use xlink:href="#right-arr"></use> </svg> <svg> <use xlink:href="#left-arr"></use> </svg>
В этой серии статей мы обсудили, что такое SVG, почему вам стоит их рассмотреть, а также основные векторные рисунки.
В какой-то момент вам захочется встроить ваш тщательно обработанный SVG прямо на веб-страницу. Для достижения этой цели существует не менее шести способов, но не все методы созданы одинаково.
Если вы собираетесь использовать какие-либо расширенные функции SVG, такие как CSS и создание сценариев, лучшим вариантом будет тег HTML5
:
Обратите внимание, что вы можете предоставить резервный текст или изображения в пределах блока объекта .
Я включил
для полноты картины, но не использую его! Хотя он похож на
,
никогда не был и, вероятно, никогда не будет частью какой-либо спецификации HTML или XHTML. Однако он поддерживается большинством браузеров и часто используется для реализации подключаемых модулей Flash.
Вот код. Работает, но не пользуйся!…
Поскольку браузеры могут обрабатывать документы SVG самостоятельно, можно загружать изображения в iframe
:
Это может быть хорошим методом, если вы хотите полностью отделить код SVG и скрипт от главной страницы.Однако управлять изображением SVG из JavaScript вашей главной страницы станет немного сложнее.
Лично я предпочитаю избегать фреймов iframe
, но это не значит, что вы никогда не должны их использовать.
Изображение SVG можно добавить как островок кода прямо на страницу HTML5 с помощью внешних тегов
:
Встроенный SVG Встроенный SVG
Метод работает во всех браузерах HTML5, а также разрешает анимацию, создание сценариев и CSS. Но стоит ли его использовать? Мне этот метод кажется немного грязным. Возможно, это вариант для простых изображений или если вы создаете изображение с помощью JavaScript, но я рекомендую по возможности хранить файлы отдельно.
SVG могут быть добавлены на вашу веб-страницу, как и любое другое изображение:
При необходимости могут быть добавлены обычные атрибуты width, height, alt и другие.
Вы, наверное, задаетесь вопросом, почему img
не занимает первое место в этом списке. По соображениям безопасности браузеры отключают скрипты SVG, ссылки и другие типы интерактивности, когда они добавляются на вашу страницу с помощью тега img
. Кроме того, IE9, Chrome и Safari не будут применять правила таблиц стилей к SVG, если они определены в отдельном файле CSS.
SVG можно использовать в качестве фона CSS для любого элемента:
#myelement { фоновое изображение: URL (image.svg); }
Подобно Теги
, скрипты SVG, связывание и другие типы интерактивности отключаются при использовании этого метода.
В большинстве случаев я рекомендую использовать тег
для отображения изображений SVG. Это кажется немного неестественным, но это самый надежный метод, если вы хотите добиться динамических эффектов.
Для изображений без взаимодействия можно использовать тег
или фон CSS.
Встроенные SVG-файлы или окна iframe являются возможными вариантами для некоторых проектов, но лучше избегать
.
Скоро в продаже: другие статьи по SVG, включая CSS и сценарии…
Комментарии к статье закрыты. Есть вопрос по HTML5? Почему бы не спросить об этом на нашем форуме?
.Вы можете встраивать элементы SVG прямо в свои HTML-страницы.
Вот пример простой графики SVG:
К сожалению, ваш браузер не поддерживает встроенный SVG., а вот HTML-код: