Hello,
I know this isn't exactly an Inkscape issue, but I gather there is some knowledge in this group so I'm asking here (and before getting tarred and feathered over at comp.infosystems.authoring.html for non-topicality).
I want to embed an SVG image in a webpage using the <object> tag. This works well, but I'd like the image to be scaled to a certain fraction of the page's width. After all, the "S" in SVG stands for scaleable. But when I add a "width" attribute to the object tag, it just cuts off the embedded image rather than scaling it.
I know SVG support is missing or buggy on most browsers, but I'd still like to experiment with it. I'm using Opera 9.20 on Linux.
Unfortunately, Inkscape's command-line parameter --export-width isn't honored with the --export-plain-svg option; otherwise I'd just do some downscaling in my webpage-generating makefile.
Thanks for any hints, --D.
Dan H wrote:
Thanks for any hints,
I think the viewBox attribute of the root svg element is the appropriate hint for this problem.
http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
Aaron Spike
I can appreciate where Dan is coming from on this. If you wanted to use the same image multiple times but at different sizes you would need to make multiple copies of the SVG file where each file is set to the right size.
Since you still need to specify the image dimensions in the file, the only advantage SVG offers over raster images is better quality image when printed (and zooming if you use Opera).
Aaron Spike-2 wrote:
Dan H wrote:
Thanks for any hints,
I think the viewBox attribute of the root svg element is the appropriate hint for this problem.
http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
Aaron Spike
This SF.net email is sponsored by: Splunk Inc. Still grepping through log files to find problems? Stop. Now Search log events and configuration files using AJAX and a browser. Download your FREE copy of Splunk now >> http://get.splunk.com/ _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
On Wed, 2007-07-25 at 16:31 -0700, microUgly wrote:
I can appreciate where Dan is coming from on this. If you wanted to use the same image multiple times but at different sizes you would need to make multiple copies of the SVG file where each file is set to the right size.
It should be sufficient to make several SVG files which reference the original SVG content with <use>, rather than copying the entire thing.
-mental
Hello,
This is wrong. You don't need multiple copies. One file is enough. You can just create one SVG file, set the width and height attribute to 100% and set a viewBox attribute defining an internal coordinate system. All of these three attributes need to go on the root element. After that you can scale the file to any size and it will adopt.
This works in all viewers, XSL-FO compilers, etc.
I don't know if Inkscape allows to set these attributes - maybe you have to do it in the XML editor.
Also zooming is not at all limited to Opera. Other viewers support zooming as well: Batik, Adobe SVG viewer, Renesis, some commercial viewers. In fact there are more viewers that support zooming than viewers that don't.
I can appreciate where Dan is coming from on this. If you wanted to use the same image multiple times but at different sizes you would need to make multiple copies of the SVG file where each file is set to the right size.
Since you still need to specify the image dimensions in the file, the only advantage SVG offers over raster images is better quality image when printed (and zooming if you use Opera).
Aaron Spike-2 wrote:
Dan H wrote:
Thanks for any hints,
I think the viewBox attribute of the root svg element is the appropriate hint for this problem.
http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
Aaron Spike
This SF.net email is sponsored by: Splunk Inc. Still grepping through log files to find problems? Stop. Now Search log events and configuration files using AJAX and a browser. Download your FREE copy of Splunk now >> http://get.splunk.com/ _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
-- View this message in context: http://www.nabble.com/Embedding-SVG-in-webpages-tf4137272.html#a11801749 Sent from the Inkscape - User mailing list archive at Nabble.com.
This SF.net email is sponsored by: Splunk Inc. Still grepping through log files to find problems? Stop. Now Search log events and configuration files using AJAX and a browser. Download your FREE copy of Splunk now >> http://get.splunk.com/ _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
Andreas Neumann-7 wrote:
You can just create one SVG file, set the width and height attribute to 100% and set a viewBox attribute defining an internal coordinate system. All of these three attributes need to go on the root element. After that you can scale the file to any size and it will adopt.
That sounds like the perfect solution. Thankyou
Andreas Neumann-7 wrote:
Also zooming is not at all limited to Opera. Other viewers support zooming as well: Batik, Adobe SVG viewer, Renesis, some commercial viewers. In fact there are more viewers that support zooming than viewers that don't.
I didn't mean to suggest other SVG viewers can't zoom. But with Opera you can zoom a HTML page and it scales everything including text, bitmap images, flash objects and SVG images. Obviously if you can use SVG images instead of bitmap images in your HTML your site will still look crisp when zoomed. IE users can zoom just the SVG image (like you can with Flash), but I don't think the HTML object size will change.
just create one SVG file, set the width and height attribute to 100% and set a viewBox attribute defining an internal coordinate system. All of these three attributes need to go on the root element. After that you can scale the file to any size and it will adopt.
That sounds like the perfect solution. Thankyou
yes, ideally the document settings in Inkscape would offer a checkbox - something like "Make document scalable", which would add the width and height="100%" attributes and would use the document size as the viewBox coordinate system.
I will add this as a feature request if this isn't on the wishlist already.
Andreas Neumann-7 wrote:
Also zooming is not at all limited to Opera. Other viewers support zooming as well: Batik, Adobe SVG viewer, Renesis, some commercial viewers. In fact there are more viewers that support zooming than viewers that don't.
I didn't mean to suggest other SVG viewers can't zoom. But with Opera you can zoom a HTML page and it scales everything including text, bitmap images, flash objects and SVG images. Obviously if you can use SVG images instead of bitmap images in your HTML your site will still look crisp when zoomed. IE users can zoom just the SVG image (like you can with Flash), but I don't think the HTML object size will change.
yes, Opera can zoom the whole webpage, but additionally you can zoom and pan the SVG graphics itself. If you right click on the SVG graphics within the webpage you'll get a context menu entry for zoomin, zoomout and original size. It isn't super intuitive but better than no separate zoom at all. In the Adobe viewer you can zoom and pan with keyboard shortcuts in parallel with the mouse. Press the control key and the zoom cursor appears --> drag a zoom rectangle, press ctrl-shift and the zoom out cursor appears, press the alt key and the pan hand appears. The Apache Batik viewer has similar functionality. Both are more intuitive than Opera regarding zoom and pan, in my opinion.
Andreas
The SVG logo page (http://www.svglogo.com/logo.html) uses the <iframe> tag, and i did a bit of experimenting with it, as it seems that when you set the size of the frame, the svg resizes rather than turncate it like the object tag does...
cheers,
ryanlerch
ryan lerch wrote:
The SVG logo page (http://www.svglogo.com/logo.html) uses the <iframe> tag, and i did a bit of experimenting with it, as it seems that when you set the size of the frame, the svg resizes rather than turncate it like the object tag does...
And <iframe> (like any other kind of frame) is *evil* anyway... :D
Hi,
the scaling of the SVG image has nothing to do with the method of embedding. It scales with all of these methods: <object/>, <iframe/>, <embed/> if you properly set a viewBox attribute and then set the width and height attribute of the <svg/> (root element) to 100%.
<object /> is the preferred method of W3C, but with Internet Explorer and the Adobe SVG viewer, esp. when used with scripting, it doesn't always work. For that reason I stil use <embed/>. As soon as Internet Explorer has native SVG support or a better SVG plugin will replace the Adobe viewer, a change to the <object/> element is highly recommended.
Hope this helps, Andreas
The SVG logo page (http://www.svglogo.com/logo.html) uses the <iframe> tag, and i did a bit of experimenting with it, as it seems that when you set the size of the frame, the svg resizes rather than turncate it like the object tag does...
cheers,
ryanlerch
This SF.net email is sponsored by: Splunk Inc. Still grepping through log files to find problems? Stop. Now Search log events and configuration files using AJAX and a browser. Download your FREE copy of Splunk now >> http://get.splunk.com/ _______________________________________________ Inkscape-user mailing list Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
participants (7)
-
Aaron Spike -
Andreas Neumann -
Dan H -
MenTaLguY -
microUgly -
Nicu Buculei (OCAL) -
ryan lerch