Bueno ya encontre algo ^_^.
Es un poco cochinete la solucion porque hay que tirar de javascript
desde html y en el fichero SVG hay que meterle un pequeño script. Osea
que no vale para cualquier fichero SVG encuentres por la red, porque
primero tienes que destriparlo para meterle el script.
No se si se podra encontrar un metodo generico que valga para cualquier
SVG sin destriparlo. Pero bueno este puede ser util para gente que tenga
acceso a los SVG para meterles mano.
Bueno aqui teneis la informacion:
http://digg.com/design/Scaling_SVG_Graphics
Pues eso un parche que funciona (en firefox he probado de momento). Y
aplicarlo (teniendo acceso al codigo fuente de los ficheros SVG...porque
sino estas vendido) es facil, se me ocurren miles de formas para
aplicarlo por ejemplo que la imagen ocupe toda la anchura del navegador
y cuando se redimensione se encoja (bueno mas o menos eso era mi
objetivo inicial :P y creo que lo cumple).
Y como nose si se pueden anexar ficheros en la lista, pego un pequeño
ejemplo de prueba:
------------------------HTML-----------------------------------------
<html>
<head><title>svg scaling with javascript</title>
<script type="text/javascript">
var W3CDOM = (document.createElement && document.getElementsByTagName);
window.onload = init;
function init(evt) {
SVGscale(0.5);
}
function SVGscale(scale) {
window.SVGsetDimension(500*scale,500*scale);
window.SVGsetScale(scale,scale);
if (!W3CDOM) return;
var box = document.getElementById('svgid');
box.width = 500*scale;
box.height = 500*scale;
}
</script>
</head>
<body bgcolor="#ffddff">
<object id="svgid" data="prueba.svg" type="image/svg+xml"
wmode="transparent" style="overflow: hidden;">
<param name="src" value="prueba.svg" wmode="transparent"
type="image/svg+xml">
</object>
Choose here:
<a href="#" onclick="SVGscale(0.1);">xsmall</a> or
<a href="#" onclick="SVGscale(0.25);">small</a> or
<a href="#" onclick="SVGscale(0.5);">medium</a> or
<a href="#" onclick="SVGscale(1);">1:1</a> or
<a href="#" onclick="SVGscale(1.5);">large</a> or ...
<h3>description</h3>
<a href="http://www.w3.org/TR/SVG/">here more about SVG</a>:
this doc was my only source for this demonstration. especially the part
about scripting is very interesting. this example shows how to rescale
a svg more or less dynamically. there are also methods for scaling
(rotation, transformation) svg dynamically and as an animation. this
doc does the following:
<ol>
<li>SVG doc is loaded embedded in the HTML, where an init function in
the SVG file's ECMA-script-part ...</li>
<li>...
registers functions in the top.* space. therefore, a script in this
HTML file can call those HTML2svg functions which execute something in
the SVG graphic. therefore you have to open the SVG file in a
texteditor</li>
<li>the init function of the HTML file resizes the svg to its initial
dimension</li>
</ol>
<h3>relevant code</h3>
<ul>
<li><h4>SVG, in and right after the header ...</h4></li>
<pre>onload="RunScript(evt)"
...
...
<script type="text/ecmascript">
<![CDATA[
var g_element;
var SVGDoc;
var SVGRoot;
function RunScript(LoadEvent) {
top.SVGsetDimension = setDimension;
top.SVGsetScale = setScale;
SVGDoc = LoadEvent.target.ownerDocument;
g_element = SVGDoc.getElementById("layer1");
}
function setDimension(w,h) {
SVGDoc.documentElement.setAttribute("width", w);
SVGDoc.documentElement.setAttribute("height", h);
}
function setScale(sw, sh) {
g_element.setAttribute("transform", "scale(" + sw + " " + sh +")");
}
]]>
</script> </pre> <li><h4>HTML</h4></li> <pre><script type="text/javascript">
var W3CDOM = (document.createElement &&
document.getElementsByTagName);
window.onload = init;
function init(evt) {
SVGscale(0.5);
}
function SVGscale(scale) {
window.SVGsetDimension(640*scale,480*scale);
window.SVGsetScale(scale,scale);
if (!W3CDOM) return;
var box = document.getElementById('svgid');
box.width = 640*scale;
box.height = 480*scale;
}
</script>
</pre>
</ul>
</body>
---------------------------------------------------------------------
-------------------PRUEBA.SVG----------------------------------------
var SVGDoc;
var SVGRoot;
//var HTMLSVG;
function RunScript(LoadEvent) {
top.SVGsetDimension = setDimension;
top.SVGsetScale = setScale;
SVGDoc = LoadEvent.target.ownerDocument;
//HTMLSVG = top.document.getElementById("svgid");
g_element = SVGDoc.getElementById("layer1");
}
function setDimension(w,h) {
SVGDoc.documentElement.setAttribute("width", w);
SVGDoc.documentElement.setAttribute("height", h);
}
function setScale(sw, sh) {
g_element.setAttribute("transform", "scale(" + sw + " " + sh +")");
}
]]>
</script>
<defs
id="defs4" />
<g
id="layer1"
transform="translate(0,0)"><!--Importante el Inkscape tiene un bug
(uhmm hay que reportar) y mueve la capa aleatoriamente//-->
<rect
width="50"
height="500"
x="0"
y="0"
style="fill:blue;fill-rule:evenodd;stroke:black;stroke-width:0.65028489px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="rect1876" />
<rect
width="500"
height="50"
x="0"
y="450"
style="fill:blue;fill-rule:evenodd;stroke:black;stroke-width:0.65028489px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="rect1876" />
<rect
width="500"
height="50"
x="0"
y="0"
style="fill:red;fill-rule:evenodd;stroke:black;stroke-width:0.65028489px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="rect1876" />
<rect
width="50"
height="500"
x="450"
y="0"
style="fill:red;fill-rule:evenodd;stroke:black;stroke-width:0.65028489px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="rect1876" />
</g>
</svg>
---------------------------------------------------------------------
P.D. Ahora el chiste para mejorar el negocio seria encontrar uno
generico para no tener que toquetear un SVG y redimensionar cualquier
SVG que enlaces. Pero este es de momento es util, es sin duda.