<svg>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Ð¸ÑÐ»Ñ 2015 г.â©.
* Some parts of this feature may have varying levels of support.
ÐÐ»ÐµÐ¼ÐµÐ½Ñ svg ÑвлÑеÑÑÑ ÐºÐ¾Ð½ÑейнеÑом, коÑоÑÑй опÑеделÑÐµÑ Ð½Ð¾Ð²ÑÑ ÑиÑÑÐµÐ¼Ñ ÐºÐ¾Ð¾ÑÐ´Ð¸Ð½Ð°Ñ Ð¸ облаÑÑÑ Ð¿ÑоÑмоÑÑа. Ðн иÑполÑзÑеÑÑÑ, как ÑамÑй внеÑний ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð´Ð¾ÐºÑменÑов SVG, но Ñакже Ð¼Ð¾Ð¶ÐµÑ Ð¸ÑполÑзоваÑÑÑÑ Ð´Ð»Ñ Ð²ÑÑÑÐ°Ð¸Ð²Ð°Ð½Ð¸Ñ ÑÑагменÑа SVG в докÑÐ¼ÐµÐ½Ñ SVG или HTML.
ÐÑимеÑание:
ÐÑÑибÑÑ xmlns ÑÑебÑеÑÑÑ ÑолÑко Ð´Ð»Ñ Ñамого внеÑнего ÑлеменÑа svg докÑменÑов SVG. ÐÑо не нÑжно Ð´Ð»Ñ Ð²Ð½ÑÑÑенниÑ
ÑлеменÑов svg или внÑÑÑи докÑменÑов HTML.
ÐÑимеÑ
<svg
viewBox="0 0 300 100"
xmlns="http://www.w3.org/2000/svg"
stroke="red"
fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
ÐÑÑибÑÑÑ
baseProfileУÑÑаÑело-
The minimum SVG language profile that the document requires. Value type: <string> ; Default value: none; Animatable: no
contentScriptTypeУÑÑаÑело-
ЯзÑк ÑÑенаÑиев по ÑмолÑаниÑ, иÑполÑзÑемÑй ÑÑагменÑом SVG. Value type: <string> ; Default value:
application/ecmascript; Animatable: no contentStyleTypeУÑÑаÑело-
ЯзÑк ÑаблиÑÑ ÑÑилей по ÑмолÑаниÑ, иÑполÑзÑемÑй ÑÑагменÑом SVG. Value type: <string> ; Default value:
text/css; Animatable: no height-
ÐÑобÑÐ°Ð¶Ð°ÐµÐ¼Ð°Ñ Ð²ÑÑоÑа пÑÑмоÑголÑной облаÑÑи пÑоÑмоÑÑа. (Ðе вÑÑоÑа его ÑиÑÑÐµÐ¼Ñ ÐºÐ¾Ð¾ÑдинаÑ.) Value type: <length>|<percentage> ; Default value:
auto; Animatable: yes preserveAspectRatio-
How the
svgfragment must be deformed if it is displayed with a different aspect ratio. Value type: (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)? ; Default value:xMidYMid meet; Animatable: yes versionУÑÑаÑело-
ÐÐ°ÐºÐ°Ñ Ð²ÐµÑÑÐ¸Ñ SVG иÑполÑзÑеÑÑÑ Ð´Ð»Ñ Ð²Ð½ÑÑÑеннего ÑодеÑжимого ÑлеменÑа. Value type: <number> ; Default value: none; Animatable: no
viewBox-
ÐооÑдинаÑÑ Ð¾Ð±Ð»Ð°ÑÑи пÑоÑмоÑÑа SVG Ð´Ð»Ñ ÑекÑÑего ÑÑагменÑа SVG. Value type: <list-of-numbers> ; Default value: none; Animatable: yes
width-
ÐÑобÑÐ°Ð¶Ð°ÐµÐ¼Ð°Ñ ÑиÑина пÑÑмоÑголÑной облаÑÑи пÑоÑмоÑÑа. (Ðе ÑиÑина его ÑиÑÑÐµÐ¼Ñ ÐºÐ¾Ð¾ÑдинаÑ.) Value type: <length>|<percentage> ; Default value:
auto; Animatable: yes x-
The displayed x coordinate of the svg container. No effect on outermost
svgelements. Value type: <length>|<percentage> ; Default value:0; Animatable: yes y-
The displayed y coordinate of the svg container. No effect on outermost
svgelements. Value type: <length>|<percentage> ; Default value:0; Animatable: yes
ÐÑимеÑание:
ÐÑимеÑание. ÐаÑÐ¸Ð½Ð°Ñ Ñ SVG2, x, y, width и height ÑвлÑÑÑÑÑ Geometry Properties, Ñо еÑÑÑ ÑÑи аÑÑибÑÑÑ Ñакже можно иÑполÑзоваÑÑ Ð² каÑеÑÑве CSS-ÑвойÑÑв.
ÐÑимеÑÐ°Ð½Ð¸Ñ Ð¿Ð¾ иÑполÑзованиÑ
| ÐаÑегоÑии | ÐлеменÑ-конÑейнеÑ, СÑÑÑкÑÑÑнÑй ÑÐ»ÐµÐ¼ÐµÐ½Ñ |
|---|---|
| РазÑеÑÑннÑй конÑÐµÐ½Ñ | ÐÑбое колиÑеÑÑво ÑледÑÑÑиÑ
ÑлеменÑов, в лÑбом поÑÑдке: ÐлеменÑÑ Ð°Ð½Ð¸Ð¼Ð°Ñии ÐлеменÑÑ Ð¾Ð¿Ð¸ÑÐ°Ð½Ð¸Ñ ÐлеменÑÑ ÑигÑÑÑ Ð¡ÑÑÑкÑÑÑнÑе ÑлеменÑÑ ÐлеменÑÑ Ð³ÑадиенÑа <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
СпеÑиÑикаÑии
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 > # NewDocument > |