Участник:Bhudh/Plage/SVG-Test: различия между версиями

Материал из LingvoWiki
Перейти к навигацииПерейти к поиску
(Демонстрация изображения и кода)
 
 
(не показана 1 промежуточная версия этого же участника)
Строка 1: Строка 1:
 +
==Сравнение размеров PNG и SVG==
 
<center>
 
<center>
 
<table width="510" border="1" align="center" style="margin:0px; padding:0px; border-width:0px;">
 
<table width="510" border="1" align="center" style="margin:0px; padding:0px; border-width:0px;">
Строка 9: Строка 10:
 
Код в формате SVG картинки номинальным размером 1063×638 пикселей весит 72557 байт.
 
Код в формате SVG картинки номинальным размером 1063×638 пикселей весит 72557 байт.
  
'''Код SVG выглядит так''':
+
{{Hider hiding
<code style="font-size:75%; margin:0px; padding:0px;">
+
|title=<div style="text-align:left; margin:0px 0px -3ex 1ex; padding:0px;">'''Код SVG выглядит так''':</div>
 +
|content=<code style="font-size:75%; text-align:left;">
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <?xml version="1.0" encoding="UTF-8"?>
 
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
Строка 60: Строка 62:
 
   <path d="M 109.26909,427.25921 C 109.26909,426.05692 109.26909,424.85463 109.26909,423.65233 110.47139,423.65233 111.67369,423.65233 112.87598,423.65233 112.87598,422.45003 112.87598,421.24774 112.87598,420.04544 114.07828,420.04544 115.28058,420.04544 116.48287,420.04544 116.48287,414.03396 116.48287,408.02248 116.48287,402.011 115.28058,402.011 114.07828,402.011 112.87598,402.011 112.87598,400.80871 112.87598,399.60641 112.87598,398.40412 109.2691,398.40412 105.66221,398.40412 102.05533,398.40412 102.05533,397.20182 102.05533,395.99953 102.05533,394.79723 98.448438,394.79723 94.841547,394.79723 91.234659,394.79723 91.234659,393.59494 91.234659,392.39264 91.234659,391.19034 88.830067,391.19034 86.425474,391.19034 84.02088,391.19034 84.02088,389.98805 84.02088,388.78575 84.02088,387.58346 82.818584,387.58346 81.616287,387.58346 80.413991,387.58346 80.413991,386.38116 80.413991,385.17886 80.413991,383.97657 79.211699,383.97657 78.009406,383.97657 76.807114,383.97657 76.807114,381.57198 76.807114,379.16738 76.807114,376.76279 75.604817,376.76279 74.402521,376.76279 73.200225,376.76279 73.200225,374.3582 73.200225,371.95361 73.200225,369.54902 74.402521,369.54902 75.604817,369.54902 76.807114,369.54902 76.807114,367.14443 76.807114,364.73983 76.807114,362.33524 78.009406,362.33524 79.211699,362.33524 80.413991,362.33524 80.413991,361.13295 80.413991,359.93065 80.413991,358.72836 81.616287,358.72836 82.818584,358.72836 84.02088,358.72836 84.02088,359.93065 84.02088,361.13295 84.02088,362.33524 82.818584,362.33524 81.616287,362.33524 80.413991,362.33524 80.413991,367.14443 80.413991,371.95361 80.413991,376.76279 81.616287,376.76279 82.818584,376.76279 84.02088,376.76279 84.02088,377.96509 84.02088,379.16738 84.02088,380.36968 85.223176,380.36968 86.425474,380.36968 87.62777,380.36968 87.62777,381.57198 87.62777,382.77427 87.62777,383.97657 90.032362,383.97657 92.436955,383.97657 94.841547,383.97657 94.841547,385.17886 94.841547,386.38116 94.841547,387.58346 98.448434,387.58346 102.05532,387.58346 105.6622,387.58346 105.6622,388.78575 105.6622,389.98805 105.6622,391.19034 109.26909,391.19034 112.87598,391.19034 116.48287,391.19034 116.48287,392.39264 116.48287,393.59494 116.48287,394.79723 117.68517,394.79723 118.88746,394.79723 120.08976,394.79723 120.08976,395.99953 120.08976,397.20182 120.08976,398.40412 121.29205,398.40412 122.49435,398.40412 123.69664,398.40412 123.69664,405.61789 123.69664,412.83167 123.69664,420.04544 122.49435,420.04544 121.29205,420.04544 120.08976,420.04544 120.08976,421.24774 120.08976,422.45003 120.08976,423.65233 118.88746,423.65233 117.68517,423.65233 116.48287,423.65233 116.48287,424.85463 116.48287,426.05692 116.48287,427.25921 114.07828,427.25921 111.67369,427.25921 109.26909,427.25921 z M 80.414092,424.97172 C 80.408585,424.27553 80.653318,423.32908 79.62845,423.65233 78.688003,423.65233 77.747558,423.65233 76.807114,423.65233 76.807114,421.24774 76.807114,418.84315 76.807114,416.43855 78.009406,416.43855 79.211699,416.43855 80.413991,416.43855 80.413991,418.84315 80.413991,421.24774 80.413991,423.65233 82.818584,423.65233 85.223176,423.65233 87.62777,423.65233 87.62777,424.85463 87.62777,426.05692 87.62777,427.25921 85.223176,427.25921 82.818584,427.25921 80.413991,427.25921 80.414024,426.49672 80.414059,425.73422 80.414092,424.97172 z M 116.48286,362.33524 C 115.28056,362.33524 114.07827,362.33524 112.87597,362.33524 112.87597,361.13295 112.87597,359.93065 112.87597,358.72835 108.06679,358.72835 103.25761,358.72835 98.448425,358.72835 98.448425,357.52606 98.448425,356.32376 98.448425,355.12147 103.25761,355.12147 108.06679,355.12147 112.87597,355.12147 112.87597,356.32376 112.87598,357.52606 112.87598,358.72836 115.28058,358.72836 117.68516,358.72835 120.08975,358.72835 120.08975,363.53754 120.08975,368.34672 120.08975,373.1559 118.88745,373.1559 117.68516,373.1559 116.48286,373.1559 116.48286,369.54902 116.48286,365.94213 116.48286,362.33524 z M 84.020882,358.72836 84.02088,355.12147 94.841547,355.12147 94.841547,358.72836 84.020882,358.72836 z" fill="#030303" />
 
   <path d="M 109.26909,427.25921 C 109.26909,426.05692 109.26909,424.85463 109.26909,423.65233 110.47139,423.65233 111.67369,423.65233 112.87598,423.65233 112.87598,422.45003 112.87598,421.24774 112.87598,420.04544 114.07828,420.04544 115.28058,420.04544 116.48287,420.04544 116.48287,414.03396 116.48287,408.02248 116.48287,402.011 115.28058,402.011 114.07828,402.011 112.87598,402.011 112.87598,400.80871 112.87598,399.60641 112.87598,398.40412 109.2691,398.40412 105.66221,398.40412 102.05533,398.40412 102.05533,397.20182 102.05533,395.99953 102.05533,394.79723 98.448438,394.79723 94.841547,394.79723 91.234659,394.79723 91.234659,393.59494 91.234659,392.39264 91.234659,391.19034 88.830067,391.19034 86.425474,391.19034 84.02088,391.19034 84.02088,389.98805 84.02088,388.78575 84.02088,387.58346 82.818584,387.58346 81.616287,387.58346 80.413991,387.58346 80.413991,386.38116 80.413991,385.17886 80.413991,383.97657 79.211699,383.97657 78.009406,383.97657 76.807114,383.97657 76.807114,381.57198 76.807114,379.16738 76.807114,376.76279 75.604817,376.76279 74.402521,376.76279 73.200225,376.76279 73.200225,374.3582 73.200225,371.95361 73.200225,369.54902 74.402521,369.54902 75.604817,369.54902 76.807114,369.54902 76.807114,367.14443 76.807114,364.73983 76.807114,362.33524 78.009406,362.33524 79.211699,362.33524 80.413991,362.33524 80.413991,361.13295 80.413991,359.93065 80.413991,358.72836 81.616287,358.72836 82.818584,358.72836 84.02088,358.72836 84.02088,359.93065 84.02088,361.13295 84.02088,362.33524 82.818584,362.33524 81.616287,362.33524 80.413991,362.33524 80.413991,367.14443 80.413991,371.95361 80.413991,376.76279 81.616287,376.76279 82.818584,376.76279 84.02088,376.76279 84.02088,377.96509 84.02088,379.16738 84.02088,380.36968 85.223176,380.36968 86.425474,380.36968 87.62777,380.36968 87.62777,381.57198 87.62777,382.77427 87.62777,383.97657 90.032362,383.97657 92.436955,383.97657 94.841547,383.97657 94.841547,385.17886 94.841547,386.38116 94.841547,387.58346 98.448434,387.58346 102.05532,387.58346 105.6622,387.58346 105.6622,388.78575 105.6622,389.98805 105.6622,391.19034 109.26909,391.19034 112.87598,391.19034 116.48287,391.19034 116.48287,392.39264 116.48287,393.59494 116.48287,394.79723 117.68517,394.79723 118.88746,394.79723 120.08976,394.79723 120.08976,395.99953 120.08976,397.20182 120.08976,398.40412 121.29205,398.40412 122.49435,398.40412 123.69664,398.40412 123.69664,405.61789 123.69664,412.83167 123.69664,420.04544 122.49435,420.04544 121.29205,420.04544 120.08976,420.04544 120.08976,421.24774 120.08976,422.45003 120.08976,423.65233 118.88746,423.65233 117.68517,423.65233 116.48287,423.65233 116.48287,424.85463 116.48287,426.05692 116.48287,427.25921 114.07828,427.25921 111.67369,427.25921 109.26909,427.25921 z M 80.414092,424.97172 C 80.408585,424.27553 80.653318,423.32908 79.62845,423.65233 78.688003,423.65233 77.747558,423.65233 76.807114,423.65233 76.807114,421.24774 76.807114,418.84315 76.807114,416.43855 78.009406,416.43855 79.211699,416.43855 80.413991,416.43855 80.413991,418.84315 80.413991,421.24774 80.413991,423.65233 82.818584,423.65233 85.223176,423.65233 87.62777,423.65233 87.62777,424.85463 87.62777,426.05692 87.62777,427.25921 85.223176,427.25921 82.818584,427.25921 80.413991,427.25921 80.414024,426.49672 80.414059,425.73422 80.414092,424.97172 z M 116.48286,362.33524 C 115.28056,362.33524 114.07827,362.33524 112.87597,362.33524 112.87597,361.13295 112.87597,359.93065 112.87597,358.72835 108.06679,358.72835 103.25761,358.72835 98.448425,358.72835 98.448425,357.52606 98.448425,356.32376 98.448425,355.12147 103.25761,355.12147 108.06679,355.12147 112.87597,355.12147 112.87597,356.32376 112.87598,357.52606 112.87598,358.72836 115.28058,358.72836 117.68516,358.72835 120.08975,358.72835 120.08975,363.53754 120.08975,368.34672 120.08975,373.1559 118.88745,373.1559 117.68516,373.1559 116.48286,373.1559 116.48286,369.54902 116.48286,365.94213 116.48286,362.33524 z M 84.020882,358.72836 84.02088,355.12147 94.841547,355.12147 94.841547,358.72836 84.020882,358.72836 z" fill="#030303" />
 
  </svg>
 
  </svg>
</code>
+
</code>}}
 +
==Тест вставки анимированного SVG==
 +
<div style="text-align:center;">[[Файл:Animated lightgreen circle.svg]]</div>
 +
 
 +
[http://wiki.lingvoforum.net/wiki/images/a/a4/Animated_lightgreen_circle.svg Original SVG]
 +
==Тест масштабирования SVG-смайлов==
 +
{| class="wikitable"
 +
! Растеризованный SVG > PNG || Масштаб|| Размеры PNG || «Вес» картинки<br />[«Вес» SVG = 16 КБ (16871 байт)]
 +
|-
 +
! [[Файл:Sm girl.svg|17px]]
 +
| ×0,5
 +
| 17×11
 +
| 351 байт
 +
|-
 +
! [[Файл:Sm girl.svg]]
 +
| ×1
 +
| 34×22
 +
| 758 байт
 +
|-
 +
! [[Файл:Sm girl.svg|68px]]
 +
| ×2
 +
| 68×44
 +
| 1,7 KБ (1730 байт)
 +
|-
 +
! [[Файл:Sm girl.svg|102px]]
 +
| ×3
 +
| 102×66
 +
| 2,7 KБ (2724 байт)
 +
|-
 +
! [[Файл:Sm girl.svg|136px]]
 +
| ×4
 +
| 136×88
 +
| 3,6 KБ (3617 байт)
 +
|-
 +
! [[Файл:Sm girl.svg|170px]]
 +
| ×5
 +
| 170×110
 +
| 4,9 KБ (4982 байт)
 +
|-
 +
! [[Файл:Sm girl.svg|204px]]
 +
| ×6
 +
| 204×132
 +
| 6,0 KБ (6110 байт)
 +
|-
 +
! [[Файл:Sm girl.svg|238px]]
 +
| ×7
 +
| 238×154
 +
| 7,1 KБ (7196 байт)
 +
|-
 +
! [[Файл:Sm girl.svg|340px]]
 +
| ×10
 +
| 340×220
 +
| 11 KБ (10840 байт)
 +
|}
 +
 
 +
В отличие от Википедии, масштабированные картинки не генерируются «на лету», поэтому подставить произвольное число в адресе изображения не получится. Для вставки масштабированной PNG-картинки на другой сайт она уже должна быть сгенерирована на LingvoWiki.

Текущая версия на 11:23, 29 мая 2011

Сравнение размеров PNG и SVG

Bitmap VS SVG.svg


Миниатюра в формате PNG размером 500×300 пикселей, которую Вы видите, весит 133720 байт.
Код в формате SVG картинки номинальным размером 1063×638 пикселей весит 72557 байт.

Тест вставки анимированного SVG

Animated lightgreen circle.svg

Original SVG

Тест масштабирования SVG-смайлов

Растеризованный SVG > PNG Масштаб Размеры PNG «Вес» картинки
[«Вес» SVG = 16 КБ (16871 байт)]
Sm girl.svg ×0,5 17×11 351 байт
Sm girl.svg ×1 34×22 758 байт
Sm girl.svg ×2 68×44 1,7 KБ (1730 байт)
Sm girl.svg ×3 102×66 2,7 KБ (2724 байт)
Sm girl.svg ×4 136×88 3,6 KБ (3617 байт)
Sm girl.svg ×5 170×110 4,9 KБ (4982 байт)
Sm girl.svg ×6 204×132 6,0 KБ (6110 байт)
Sm girl.svg ×7 238×154 7,1 KБ (7196 байт)
Sm girl.svg ×10 340×220 11 KБ (10840 байт)

В отличие от Википедии, масштабированные картинки не генерируются «на лету», поэтому подставить произвольное число в адресе изображения не получится. Для вставки масштабированной PNG-картинки на другой сайт она уже должна быть сгенерирована на LingvoWiki.