Question for SVG experts!
I'm using Inkscape to compose the covers of my books.
Those books have always a very similiar cover, so I made a sort of generic cover. Then, I have simply to change text and I'm ready with the next cover...
And the front illustration is updated simply changing the namefile in the propierties... very easy.
There is a little logo (a small image) to be centered in a precise point of the cover.
This logo changes from cover to cover and size is different. (ex: 100x100 ... then 80x120 and so on...)
The problem is Inkscape using the upper-left angle of the image as "fixed point" -> when I change the name of the file in the properties, the logo changes BUT the position will shift on the right, loosing its central position...
Since InkScape doesn't support "allignment" of the images, I need a trick to place my logo as it would "centered" to a declared point...
( May be some SVG property would help? )
How to lock an image to a "center-point"?
Re: How to lock an image to a "center-point"?
I'm not sure what you mean by "allignment' of images. But Inkscape does have the Align and Distribute dialog (Object menu), with many different options for aligning various items. There's not specifically a center alignment, but you should be able to align horizontally, then vertically (or vice versa), and achieve the centering.
You might also be able to do it using the Snap feature. Specifically snap to the center of the bounding box, snap to an object's center, or snap to an object's center of rotation.
Lots of options there, and you probably won't need to bother with the SVG code!
You might also be able to do it using the Snap feature. Specifically snap to the center of the bounding box, snap to an object's center, or snap to an object's center of rotation.
Lots of options there, and you probably won't need to bother with the SVG code!
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: How to lock an image to a "center-point"?
1. Open the Align & Distribute menu (>Object >Align and Distribute..." or Shift+ Ctrl+ A )
2. Select your object (image)
3. In the Align & Distribute Menu the first sub menu area are the "Align" tools;
>set the first option is "relative to:" use the pull down menu and select "page"
> Float your mouse over the Alignment icons a tool tip message will display showing what icons perform what functions.. Click on "Center on Verticle Axis" (first row of icons 3rd one)
> then click on the 3rd icon of the second row of icons "Center on Horizontal axis" .
4. Done this will align the center of your image to the center of the page.
http://tavmjong.free.fr/INKSCAPE/MANUAL ... lign-Align
2. Select your object (image)
3. In the Align & Distribute Menu the first sub menu area are the "Align" tools;
>set the first option is "relative to:" use the pull down menu and select "page"
> Float your mouse over the Alignment icons a tool tip message will display showing what icons perform what functions.. Click on "Center on Verticle Axis" (first row of icons 3rd one)
> then click on the 3rd icon of the second row of icons "Center on Horizontal axis" .
4. Done this will align the center of your image to the center of the page.
http://tavmjong.free.fr/INKSCAPE/MANUAL ... lign-Align
Re: How to lock an image to a "center-point"?
seven_legion wrote:Since InkScape doesn't support "allignment" of the images, I need a trick to place my logo as it would "centered" to a declared point...
AFAIU you talk about editing the SVG source outside of Inkscape - why not place the image inside a group with a fixed size (i.e. together with an invisible rectangle (no fill, no stroke)), then calculate the shift of the origin of the replacing image/object manually in relation to the origin of the group i.e. rectangle:
Code: Select all
x=(width of rectangle - width of new object)/2
Example:
Code: Select all
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="myImageContainer-g3293">
<rect
y="100"
x="100"
height="100"
width="200"
id="myFrame-rect3291"
style="opacity:0.4;fill:#b3b3b3;fill-opacity:1;stroke:none"
sodipodi:insensitive="true" />
<rect
transform="translate(20,0)"
x="100"
y="100"
height="100"
width="160"
id="myImage-rect3315"
style="opacity:0.4;fill:#ff5555;fill-opacity:1;stroke:none" />
</g>
</g>
- Attachments
-
- seven_legion-2.svg
- (2.29 KiB) Downloaded 221 times
Re: How to lock an image to a "center-point"?
thank everybody for help!
vwanweb: your idea works but, doing some experiments, I'm afraid the result is obtained just doing "a calculation on the fly" to place the object where needed.
If someone replaces the previous image with a different one, the new one will be no more "centered" as wanted.
What I need is to set an absolute -evervalid- rule for that object:
For example, lets say (100,100) is the point where the center of the image must be placed. If I replace the image, the new image must automatically have its center on point (100,100)
I will explain the problem with some images:
This is a cover example, notice the "dog head" in the blue rectangle, on the left. This is the "Logo" of this book.
I added a red cross to show where is the centre where I would like to have my logo anchored.
Instead, Inkscape is simply referring the image by its upper-left angle (the green sign)

The problem comes out when someone want to use this cover as a base for new covers.
I want people doing it simply changing image files in the directory.
I dont want they have to recalculate or manually repositionate objects because my friends are novel writers, not graphicians...
By the way, the big coloured image is simply to change because is clipped in a box. Just replace the external jpg file with another image with the same resolution and it will appair on the front.
Text also is easy to edit.
Notice now we have another logo: a dragon. This image has a different XY ratio from "dog head" becuse of the wings...
What happens replacing the dog.png file with dragon.png in the directory?: the image will be placed starting from the left-upper corner, instead of keep the "red cross" as its fixed point.
So it will appair moved on the right and no more centered in the blu rectangle...
Look here:

By the way, in th ebeggining I had the same problem with text.
Notice, under the logo, there is the "serial name": "Lupo solitario" in the first case and "Golden Dragon" in the second.
With InkScape you can justify text, but it will anchored always at the start.
So, again, when user write a longer name, text will expand on the right loosing its center position.
But I discovered, in the SVG manual, the property "text-anchor:middle" and now text expand both on the left and right, keeping always its middle point at same place. OK!
vwanweb: your idea works but, doing some experiments, I'm afraid the result is obtained just doing "a calculation on the fly" to place the object where needed.
If someone replaces the previous image with a different one, the new one will be no more "centered" as wanted.
What I need is to set an absolute -evervalid- rule for that object:
For example, lets say (100,100) is the point where the center of the image must be placed. If I replace the image, the new image must automatically have its center on point (100,100)
I will explain the problem with some images:
This is a cover example, notice the "dog head" in the blue rectangle, on the left. This is the "Logo" of this book.
I added a red cross to show where is the centre where I would like to have my logo anchored.
Instead, Inkscape is simply referring the image by its upper-left angle (the green sign)

The problem comes out when someone want to use this cover as a base for new covers.
I want people doing it simply changing image files in the directory.
I dont want they have to recalculate or manually repositionate objects because my friends are novel writers, not graphicians...
By the way, the big coloured image is simply to change because is clipped in a box. Just replace the external jpg file with another image with the same resolution and it will appair on the front.
Text also is easy to edit.
Notice now we have another logo: a dragon. This image has a different XY ratio from "dog head" becuse of the wings...
What happens replacing the dog.png file with dragon.png in the directory?: the image will be placed starting from the left-upper corner, instead of keep the "red cross" as its fixed point.
So it will appair moved on the right and no more centered in the blu rectangle...
Look here:

By the way, in th ebeggining I had the same problem with text.
Notice, under the logo, there is the "serial name": "Lupo solitario" in the first case and "Golden Dragon" in the second.
With InkScape you can justify text, but it will anchored always at the start.
So, again, when user write a longer name, text will expand on the right loosing its center position.
But I discovered, in the SVG manual, the property "text-anchor:middle" and now text expand both on the left and right, keeping always its middle point at same place. OK!
Re: How to lock an image to a "center-point"?
~suv: you are talking about recalculating the new position?
Yes, it can be done by "translate statement" or simply directly updating the object's x-y coordinates...
Anyway I want to keep this as last choice because it needs a script or some other external tool.
Since I dont know pyton or javascript, I was thinking about a simple free-basic program.
It will inquire the resolution of jpg/png file, then open the .svg file to correct the values...
But I want to discover before if there is a simpler solution...
Yes, it can be done by "translate statement" or simply directly updating the object's x-y coordinates...
Anyway I want to keep this as last choice because it needs a script or some other external tool.
Since I dont know pyton or javascript, I was thinking about a simple free-basic program.
It will inquire the resolution of jpg/png file, then open the .svg file to correct the values...
But I want to discover before if there is a simpler solution...
Re: How to lock an image to a "center-point"?
I would suggest modifying the logos to all be the same size. It's not clear whether they are bitmap images or SVG images, but as you're talking about changing the filename of the logo, I'll assume it's a bitmap image. In that case, I would do the following:
1) Identify the maximum size that's available for the logo to fill. Let's say 120x120px.
2) Create a bitmap file of that maximum size and fill it with an obvious colour to make it stand out. You could create a coloured square in Inkscape and export to a 120x120 png, or use something like The Gimp or Photoshop.
3) Position this placeholder image in your template file, based on its top-left corner.
Now when you want to insert a logo, you should first open the logo in The Gimp or something similar, and change the canvas size to 120x120. You should have an option to centre the logo as you do so. Save that 120x120 file (which is actually your 100x100 logo with a blank 10px border round it) and put its filename into the template file instead of the placeholder.
This approach moves the problem away from "how do I set the anchor point to the center of my file" and instead relies on you centring the logo inside a larger transparent image. It's an extra step in your workflow, but should do the trick.
1) Identify the maximum size that's available for the logo to fill. Let's say 120x120px.
2) Create a bitmap file of that maximum size and fill it with an obvious colour to make it stand out. You could create a coloured square in Inkscape and export to a 120x120 png, or use something like The Gimp or Photoshop.
3) Position this placeholder image in your template file, based on its top-left corner.
Now when you want to insert a logo, you should first open the logo in The Gimp or something similar, and change the canvas size to 120x120. You should have an option to centre the logo as you do so. Save that 120x120 file (which is actually your 100x100 logo with a blank 10px border round it) and put its filename into the template file instead of the placeholder.
This approach moves the problem away from "how do I set the anchor point to the center of my file" and instead relies on you centring the logo inside a larger transparent image. It's an extra step in your workflow, but should do the trick.
Re: How to lock an image to a "center-point"?
It's not what I was thinking of... but it sounds anyway like a simple and nice idea!
If a logo is saved as png image, there is a transparency color. So problem is solved by making a constant-size block of graphic...
It sounds OK to me, even if I was curious to see if there was a "more ufficial" way to center images...
Well... ->Problem Solved.
Tanks to everybody, all of you gave me various new ideas...
If a logo is saved as png image, there is a transparency color. So problem is solved by making a constant-size block of graphic...
It sounds OK to me, even if I was curious to see if there was a "more ufficial" way to center images...
Well... ->Problem Solved.
Tanks to everybody, all of you gave me various new ideas...
