Quantcast

Using <Object> to scale SVG file

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Using <Object> to scale SVG file

Gnosos
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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using <Object> to scale SVG file

rygle
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 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using <Object> to scale SVG file

Gnosos
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 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using <Object> to scale SVG file

Gnosos
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
.
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 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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using <Object> to scale SVG file

Claus Cyrny
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


--
Web design,graphics, photography: http://home.arcor.de/ccyrny/ (English|German)
Articles: http://www.americanchronicle.com/articles/viewByAuthor.asp?authorID=2153 (English)


-------------------------------------------------------------------------
Check out the new SourceForge.net Marketplace.
It's the best place to buy or sell services for
just about anything Open Source.
http://ad.doubleclick.net/clk;164216239;13503038;w?http://sf.net/marketplace
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using <Object> to scale SVG file

Gnosos
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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using <Object> to scale SVG file

Florian Köberle
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.


-------------------------------------------------------------------------
Check out the new SourceForge.net Marketplace.
It's the best place to buy or sell services for
just about anything Open Source.
http://ad.doubleclick.net/clk;164216239;13503038;w?http://sf.net/marketplace
_______________________________________________
Inkscape-user mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Loading...