Увеличить интерактивную карту - конкретно svg

Question

Я использовал этот учебник - http://www.netzgesta.de/mapper/ для создания интерактивной карты (http://teamworksdesign.com/clients/neurosign/contact/alabama/), проблема в том, что я хочу увеличить ее на 10-20%, чтобы немного лучше заполнить пространство.

Я использовал эти два изображения:

И svg:

http://teamworksdesign.com/clients/neurosign/wp-content/themes/default/images/usa_map.svg

Очевидно, что png достаточно легко увеличить в PS, но как я могу увеличить svg, сохраняя все его координаты на месте?

UPDATE: Изменение этой строки ниже в svg не влияет на размер svg, состояния при наведении остаются прежними:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">

Answer 1

SVG - векторный формат. Поэтому, если вы просто измените атрибуты width и height корневого элемента на 100% каждый и оставите область просмотра на исходных значениях пикселей, она заполнит доступное пространство, в то время как каждая координата будет пересчитана анализатором. Размер отображаемого изображения теперь зависит от того, где оно встроено.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">

Кроме того, вместо использования JavaScript для эффектов наведения я бы использовал CSS (например, polygon:hover { fill: #32cd32; }).

Answer 2

Изменить ширину и высоту в пикселях, но оставить viewBox как есть. Например, удвоить до размера:

<svg width="832px" height="550px" viewBox="0 0 432 275" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">