Размер svg

[fir1st]

День добрый.

Есть svg-иконка 32х32, и вставлена она таким кодом:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" style="position: absolute;" >
<path fill="#D1D1D1" stroke="none" d="M15.583,15.917l1.648-10.779C16.692,5.056,16.145,5,15.583,5C9.554,5,4.666,9.888,4.666,15.917c0,6.029,4
.888,10.917,10.917,10.917S26.5,21.946,26.5,15.917c0-0.256-0.021-0.507-0.038-0.759L15.583,15.917zM19.437,3.127l-1.648,10.779l10.879-0.759C28.313,8.026,24.436,3.886,19.437,3.127z">
</path>
<rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#000000" stroke="#000" style="opacity: 0; " opacity="0">
</rect>
</svg>

Как изменить её размер? Width и height меняют только область рисования, неужели нужно перерисовывать и обновлять координаты?

Edited December 22, 2010 by fir1st

[deadrash]

Откройте SVG редактором и увеличьте.

[Great Rash]

Кто-то хабра начитался и бегом внедрять...

Такие иконки хороши тем, что их качество не меняется в зависимости от зума окна. Но зумить саму картинку вы не сможете, для этого надо переписывать все координаты. Изменять ее размеры в таком виде можно только скриптом. Например в библиотеке raphael.js есть метод scale().

[barsev]

День добрый.

Есть svg-иконка 32х32

...

Как изменить её размер? Width и height меняют только область рисования, неужели нужно перерисовывать и обновлять координаты?

Это примерный шаблон рисунка svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:ev="http://www.w3.org/2001/xml-events"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 32 32"
  id="svg3007" >
  <defs>
	Это раздел для служебной информации (как head в html)
  </defs>

	Здесь помещаем элементы непосредственно рисунка

</svg>

Обратите внимание на это:

width="100%"

height="100%"

viewBox="0 0 32 32"

А вот так ваш рисунок вставляется в html

<div id='svgimage'>
  <object type="image/svg+xml" name="myicon" 
	data="путь к файлу .svg" width="100%" height="100%">
	Для просмотра SVG графики Вам необходимо обновить браузер</object>
</div>

А здесь обратите внимание сюда:

width="100%" height="100%"

Задавая размер элементу div id='svgimage' вы задаете тем самым размер своей иконке.

А вообще вам лучше сходить сюда: Масштабируемая векторная графика. Хороший курс лекций.