Hi,
I'm new to Inkscape and SVG. I've just created my first Inkscape graphic and now want to include it in my web page. I've learned to use the tag to do this, and it works fine except for one thing. The graphic is too big, and Firefox is automatically generating scroll bars to view the entire image (which does not fit into the height and width specified in the object tag).
Is there any way to scale an SVG image at render time, either by using options in the object tag or by some other means? I tried using the object tag's subtag to specify height and width parameters, but that didn't work.
Thanks.
You can scale the document/image size of the SVG, and it will still be perfectly scalable to larger sizes if someone saves it and loads it into Inkscape, but it will appear smaller on the page. The easiest way to do this would be to go to File->Document Properties, set the page size, and then select all and scale the graphic to match the page size. If there is too much white space, you can also then select all and in Document Properties select Fit Page To Selection. See here on the http://openclipart.org/wiki/Guidelines OCAL wiki
Cheers,
Rygle.
Gnosos wrote:
Hi,
I'm new to Inkscape and SVG. I've just created my first Inkscape graphic and now want to include it in my web page. I've learned to use the tag to do this, and it works fine except for one thing. The graphic is too big, and Firefox is automatically generating scroll bars to view the entire image (which does not fit into the height and width specified in the object tag).
Is there any way to scale an SVG image at render time, either by using options in the object tag or by some other means? I tried using the object tag's subtag to specify height and width parameters, but that didn't work.
Thanks.
Thanks Rygle, this helps.
Still, I wish there were a way to use a single graphic and scale it in the web composition language (html). For instance, the identical graphic could them be used as an icon and as a larger picture without having to create two different versions of the graphic. The latter is not only time-and-resource consuming, it also is dangerous since one might modify one version of the graphic and forget to change the others.
Gnosos
rygle wrote:
You can scale the document/image size of the SVG, and it will still be perfectly scalable to larger sizes if someone saves it and loads it into Inkscape, but it will appear smaller on the page. The easiest way to do this would be to go to File->Document Properties, set the page size, and then select all and scale the graphic to match the page size. If there is too much white space, you can also then select all and in Document Properties select Fit Page To Selection. See here on the http://openclipart.org/wiki/Guidelines OCAL wiki
Cheers,
Rygle.
Gnosos wrote:
Hi,
I'm new to Inkscape and SVG. I've just created my first Inkscape graphic and now want to include it in my web page. I've learned to use the tag to do this, and it works fine except for one thing. The graphic is too big, and Firefox is automatically generating scroll bars to view the entire image (which does not fit into the height and width specified in the object tag).
Is there any way to scale an SVG image at render time, either by using options in the object tag or by some other means? I tried using the object tag's subtag to specify height and width parameters, but that didn't work.
Thanks.
Hi again,
I have actually found a way to scale objects using the method described at http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html . Essentially, a simple Javascript in the web page communicates with another simple one in the SVG file to scale it.
Now my question is this. Is there any way to automate Inkscape to include the necessary script code in svg files?
Gnosos
Gnosos wrote:
Thanks Rygle, this helps.
Still, I wish there were a way to use a single graphic and scale it in the web composition language (html). For instance, the identical graphic could them be used as an icon and as a larger picture without having to create two different versions of the graphic. The latter is not only time-and-resource consuming, it also is dangerous since one might modify one version of the graphic and forget to change the others.
Gnosos
rygle wrote:
You can scale the document/image size of the SVG, and it will still be perfectly scalable to larger sizes if someone saves it and loads it into Inkscape, but it will appear smaller on the page. The easiest way to do this would be to go to File->Document Properties, set the page size, and then select all and scale the graphic to match the page size. If there is too much white space, you can also then select all and in Document Properties select Fit Page To Selection. See here on the http://openclipart.org/wiki/Guidelines OCAL wiki
Cheers,
Rygle.
Gnosos wrote:
Hi,
I'm new to Inkscape and SVG. I've just created my first Inkscape graphic and now want to include it in my web page. I've learned to use the tag to do this, and it works fine except for one thing. The graphic is too big, and Firefox is automatically generating scroll bars to view the entire image (which does not fit into the height and width specified in the object tag).
Is there any way to scale an SVG image at render time, either by using options in the object tag or by some other means? I tried using the object tag's subtag to specify height and width parameters, but that didn't work.
Thanks.
Gnosos wrote:
Hi again,
I have actually found a way to scale objects using the method described at http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html . Essentially, a simple Javascript in the web page communicates with another simple one in the SVG file to scale it.
Now my question is this. Is there any way to automate Inkscape to include the necessary script code in svg files?
Why in the world do you want to do that? Didn't you read Rygle's response?
Claus
Claus Cyrny wrote:
Gnosos wrote:
Hi again,
I have actually found a way to scale objects using the method described at http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html . Essentially, a simple Javascript in the web page communicates with another simple one in the SVG file to scale it.
Now my question is this. Is there any way to automate Inkscape to include the necessary script code in svg files?
Why in the world do you want to do that? Didn't you read Rygle's response?
Claus
Read my post of January 12. By using the web page to scale the image, the same image can be used in multiple ways. Furthermore, changes to the single copy of the image would be reflected correctly throughout the web site.
Perhaps a simple example will illustrate. Suppose you had a web site devoted to a specific software. One page has links to different topics (About, tutorial, documentation, plugins, etc.). Each link includes a small 3cm x 3cm icon that both symbolizes the content of the linked page and actually appears on the linked page. On the linked page the icon image appears much large (say 10 cm x 10 cm) so that instead of being just symbolic, the user can actually see what's in the image. As is common on web pages, one might also want to be able to click on the image to see an enlarged version.
Yet another reason is that web page layouts change, and one should not have to go back and modify content in order to modify layout.
This is a pretty typical usage for images on the web. Rygle's suggestion, if I understood it correctly, requires changing the image's scale in Inkscape for every copy of the image used on the site and changing the original image's scale each time the web page layout requires an image with different size.
Hi, preserveAspectRatio and viewBox can be used for scaling.
example: http://www.w3.org/TR/SVG/images/coords/PreserveAspectRatio.svg http://www.w3.org/TR/SVG11/images/coords/PreserveAspectRatio.png
from: http://www.w3.org/TR/SVG11/coords.html
Best regards, Florian Koeberle
Gnosos wrote:
Claus Cyrny wrote:
Gnosos wrote:
Hi again,
I have actually found a way to scale objects using the method described at http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html http://www.unet.univie.ac.at/~a9900479/svg4tom/svg4tom1.html . Essentially, a simple Javascript in the web page communicates with another simple one in the SVG file to scale it.
Now my question is this. Is there any way to automate Inkscape to include the necessary script code in svg files?
Why in the world do you want to do that? Didn't you read Rygle's response?
Claus
Read my post of January 12. By using the web page to scale the image, the same image can be used in multiple ways. Furthermore, changes to the single copy of the image would be reflected correctly throughout the web site.
Perhaps a simple example will illustrate. Suppose you had a web site devoted to a specific software. One page has links to different topics (About, tutorial, documentation, plugins, etc.). Each link includes a small 3cm x 3cm icon that both symbolizes the content of the linked page and actually appears on the linked page. On the linked page the icon image appears much large (say 10 cm x 10 cm) so that instead of being just symbolic, the user can actually see what's in the image. As is common on web pages, one might also want to be able to click on the image to see an enlarged version.
Yet another reason is that web page layouts change, and one should not have to go back and modify content in order to modify layout.
This is a pretty typical usage for images on the web. Rygle's suggestion, if I understood it correctly, requires changing the image's scale in Inkscape for every copy of the image used on the site and changing the original image's scale each time the web page layout requires an image with different size.
participants (4)
-
Claus Cyrny -
Florian Köberle -
Gnosos -
rygle