renovations

Author: iliakan

2-ui/1-document/15-metrics/article.md

@@ -33,7 +33,7 @@
 
 Результат выглядит так:
 
-<img src="metric-css.png">
+<img src="metric-css.svg">
 
 Вы можете открыть [edit src="metric"]этот документ в песочнице[/edit].
 
@@ -64,7 +64,7 @@
 Вот общая картина:
 
 
-<img src="metric-all.png">
+<img src="metric-all.svg">
 
 На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
 
@@ -99,15 +99,15 @@
 </main>
 ```
 
-<img src="metric-offset-parent.png">
+<img src="metric-offset-parent.svg">
 
 ## offsetWidth/Height
 
 Теперь переходим к самому элементу.
 
 Эти два свойства -- самые простые. Они содержат "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`.
 
-<img src="metric-offset-width-height.png">
+<img src="metric-offset-width-height.svg">
 
 Для нашего элемента:
 <ul>
@@ -152,7 +152,7 @@ function isHidden(elem)
 <li>`clientTop = 25` -- ширина верхней рамки</li>
 </ul>
 
-<img src="metric-client-left-top.png">
+<img src="metric-client-left-top.svg">
 
 ...Но на самом деле они -- вовсе не рамки, а отступ внутренней части элемента от внешней.
 
@@ -162,7 +162,7 @@ function isHidden(elem)
 
 Получится так:
 
-<img src="metric-client-left-top-rtl.png">
+<img src="metric-client-left-top-rtl.svg">
 
 
 ## clientWidth/Height
@@ -171,7 +171,7 @@ function isHidden(elem)
 
 Они включают в себя ширину содержимого `width` вместе с полями `padding`, но без прокрутки.
 
-<img src="metric-client-width-height.png">
+<img src="metric-client-width-height.svg">
 
 На рисунке выше посмотрим вначале на `clientHeight`, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок: CSS-ширина `200px` плюс верхнее и нижнее поля `padding` (по `20px`), итого `240px`.
 
@@ -183,7 +183,7 @@ function isHidden(elem)
 
 **Если `padding` нет, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.**
 
-<img src="metric-client-width-nopadding.png">
+<img src="metric-client-width-nopadding.svg">
 
 Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
 
@@ -193,7 +193,7 @@ function isHidden(elem)
 
 Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
 
-<img src="metric-scroll-width-height.png">
+<img src="metric-scroll-width-height.svg">
 
 На рисунке выше:
 <ul>
@@ -223,7 +223,7 @@ element.style.height = element.scrollHeight + 'px';
 
 Следующее иллюстрация показывает значения `scrollHeight` и `scrollTop` для блока с вертикальной прокруткой.
 
-<img src="metric-scroll-top.png">
+<img src="metric-scroll-top.svg">
 
 [smart header="`scrollLeft/scrollTop` можно изменять"]
 В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента.