Searching for a way to scale text to fit an area i get this usefull informations, i just want to share:
https://css-tricks.com/scale-svg/

Would be nice if inkscape is going to support this "How to Scale Parts of an SVG Separately" thingy.

Ooohh, that looks like a nice one, for sure! The tutorial, I mean.

Inkscape can already scale parts of an SVG separately. Inkscape images are not just images (as the article says). It's made of SVG/XML code. In that article, they are manipulating the SVG/XML code in a text editor.

Inkscape does the same thing....or at least very similar, except with Inkscape you use the canvas and mouse (instead of text editor). You can see the SVG/XML in the XML Editor.

To scale any object (any part of an SVG file/image) separately, just select it separately, and scale.

brynn wrote:To scale any object (any part of an SVG file/image) separately, just select it separately, and scale.

Well, i know that
But that was not i try to mention. The tutorial shows how to let inner svg scale (with other ratio) automaticly when you scale a surrounding svg.

iconberg wrote:Well, i know that
But that was not i try to mention. The tutorial shows how to let inner svg scale (with other ratio) automaticly when you scale a surrounding svg.

Oh, I see. "How to Scale Parts of an SVG Separately" is the last section of that tutorial. From what I can tell, it's about coding an SVG image to be viewed on a webpage.

One problem with web design is that there are so many different shapes and kinds and resolutions of computer screens, and it's hard to make a webpage that either looks the same on all kinds of screens, or that at least looks "ok" on all kinds of screens. So your webpage either needs to be a fixed width (that's the kind which on modern screens shows a huge amount of blank space on both sides of the screen - because on older screens (still commonly in use in eastern hemisphere) the fixed width sites fill the whole screen) (the Inkscape website is, unfortunately, an example of this) or you need huge amounts of code to make your webpage "responsive" or that fits itself to any kind of screen.

One of the great benfits of SVG, is that the image looks good at any size. So when the SVG image on a webpage is shown on different kinds of screens, it always looks good. That's the kind of scaling that the last section of that tutorial is about. Normally the image will be scaled to fit whatever screen it's viewed on. So this is a way to have only 1 or certain objects in the SVG image scale by a different amount than the rest of the image.

The tutorial gives the example of web banners or headers. You can alter the SVG so that it only scales in width, not in height.

So Inkscape does not have any tools to instruct how the image behaves, when it's used on a webpage. There are various extensions which help with using Inkscape for web design. My best guess, for ever seeing this type of feature in Inkscape, would be as an extension.

But you can already do it yourself, by changing the SVG/XML code, as suggested by that tutorial.

brynn wrote:
But you can already do it yourself, by changing the SVG/XML code, as suggested by that tutorial.

I tried but than resizing is not working any more, attached an example with inner svg (circle).

Well no, you can't do it in Inkscape. Have you noticed what the status bar says, when you try to scale the circle? It says "Cannot transform an embedded SVG". You may have done the SVG nesting correctly (I have no idea, since I haven't read the tutorial very closely). But it won't work in Inkscape.

You have to do it in a text editor, and....well, I'm guessing.... you have to have a webpage to test it on. I'm only guessing about this. But I guess you could set up a webpage with 2 or 3 different sized frames for images. ("frames" might not be the proper term) Then put your SVG file (not image, but file) in all frames. Then you can compare how the....I guess you could call it "auto-scaling"....how it works.

Hhmm.... OH....maybe you don't have to have a webpage. Just open the SVG file with a browser. I guess you'd have to set up the overall image size....maybe with the viewbox attribute?? So have 3 SVG files of different (viewbox) sizes, and you could see how the auto-scaling works.

I'm really out of my league here. When I realized you posted in this SVG/XML board, I thought you might have posted here by mistake. But you're in the right place. It's just me being in the wrong place. I understand the general ideas for all of what's being discussed here. But I've never done any of it, so I don't know about the pitfalls.

You are trying to add css for changing the text object's size, instead of using css to change the font size?
*insert philosoraptor meme*

Inkscape can hardly work with css, you need to write in the code manually.
Oh, you have an embedded svg? How?
That is out of inkscape's features as far as I know.
Also separate viewboxes.
Because the size of the document is set globally with one viewbox, -as suggested in svg specs, dealing with px to real word units only once in the file. (On a side note 0.92 is getting to 96 dpi from the current 90 dpi.)


Using the transformation panel (Shift+Ctrl+M), there is an option to apply transformation to each selected object separately.
Scaling your embedded svg behaves weird. If you put it in a group (Ctrl+G) and scale the group instead, it works as expected.

Well the embedded SVG comes from him trying to apply the instructions from the referenced tutorial, for nested SVG tags, and then open the image in Inkscape. But it just can't work in Inkscape. Inkscape isn't made for that kind of code. Maybe in a browser?