Want to create border on image inside SVG wrapper

GrannyGrump · 09-27-2014, 02:16 AM

Back again with another stupid SVG question...
I want to add a border to an image inside an SVG *wrapper*.
I tried by using "border-width="xxxxxx", and by using "style="border-width:xxxxxxx", etc, etc, etc. And those don't work worth a darn. Using "rect" inside a wrapper won't work. I have googled around unsuccessfully, so now I am stuck.

Is it possible to do this? Do I have to make some sort of declaration to identify these?
Any advice will be much appreciated.

odedta · 09-27-2014, 02:39 AM

Solution:

Code:

<div style="border:1px black solid;">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="99%" preserveAspectRatio="none" version="1.1" viewBox="0 0 768 1024" width="99%">

    <image height="99%"  width="99%" xlink:href="../Images/cover.jpg"/>

  </svg>
</div>

Jellby · 09-27-2014, 04:28 AM

Quote:

Originally Posted by GrannyGrump

Back again with another stupid SVG question...
I want to add a border to an image inside an SVG *wrapper*.

Can you show your current code?

GrannyGrump · 09-28-2014, 05:28 AM

@Odedta, your code was interesting, but it will distort the image if the screen size does not exactly match the image ratio. That would work, though, for some abstract designs, etc. I will keep that one in my back pocket for future use. Thanks.

I wanted some background color around all edges, instead of the image butting right up against the frame on two sides.

This did not work for me:

Code:

<head>
<title>cover</title>

<style type="text/css">
@page {margin: 0; padding: 0; border-width: 0; }
body {margin:0; padding: 0;  border-width: 0;
 }
div {
text-indent: 0em;
text-align: center;
}
</style>
</head>

<body>

<div>
<svg xmlns="http://www.w3.org/2000/svg" height="99%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1024 1457" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1457" width="1024" style="border-width:5px; border-style:solid; border-color:black" xlink:href="../Images/coverET.jpg"/>
</svg>
</div>
</body>

I ended up using the following, which sets the div with a black background color, and adjusting the viewport size and alignment.

Code:

<head>
<title>cover</title>

<style type="text/css">
@page {margin: 0; padding: 0; border-width: 0; }
body {margin:0; padding: 0;  border-width: 0;
 }
div {
text-indent: 0em;
text-align: center;
background-color: black; 
}
</style>
</head>

<body>

<div>
<svg xmlns="http://www.w3.org/2000/svg" height="99%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="-30 -30 1084 1497" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1457" width="1024" xlink:href="../Images/coverET.jpg"/>
</svg>
</div>
</body>

Jellby · 09-28-2014, 02:47 PM

You can simply add a <rect> with stroke after the image (it will be drawn above it). The problem here is that it will overlap the image.

Code:

<svg ... viewBox="0 0 600 800">
<image height="800" width="600" xlink:href="Cover.jpg"/>
<rect height="800" width="600" style="stroke-width:10;stroke:rgb(255,0,0);fill:none;"/>

If you don't want that, and you want some even border around the image, you can do some math, as you did with the viewport, and put a filled <rect> behind the image:

Code:

<svg ... viewBox="-10 -10 620 820">
<rect height="820" width="620" x="-10" y="-10" style="fill:rgb(255,0,0);"/>
<image height="800" width="600" xlink:href="Cover.jpg"/>

Note the math is very simple: for a 10-unit-wide border, use "-10" instead of "0" and "820" instead of "800" (in viewBox and in the <rect> properties).

Another idea would be to scale the image down, so you can skip the math, but then the borders are not even (because adding is not the same as multiplying), you don't have the same control on their size, and you need maths for the translations (now the math is divide by two):

Code:

<svg ... viewBox="0 0 600 800">
<rect height="800" width="600" style="fill:rgb(255,0,0);"/>
<g transform="translate(300,400)">
<image height="800" width="600" x="-300" y="-400" xlink:href="Cover.jpg" transform="scale(0.95)" />
</g>

GrannyGrump · 09-28-2014, 10:03 PM

@Jellby, thank you. Some new tricks to play with, I love it!

I don't know why my eyes glaze and my brain goes to sleep when I see the letters SVG, but I have been trying to overcome that.

I will try the filled rect the next time I want a border. Thanks again.

Jellby · 09-29-2014, 01:13 PM

By the way, my I say that I prefer the cover image to take the whole screen? My reader is already adding enough margins on its own (especially on thumbnails).

GMcG · 09-30-2014, 01:10 PM

You could add a border to the picture itself, so you don't have the trouble with SVG or CSS.
I know that you have IrfanView. There are two options in Image:
1. Change cavas size (which actually means: Add image border. You can choose a colour.).
2. Add border/frame (with a selection of defined frames).
I think this is easier.

George

GrannyGrump · 10-01-2014, 09:41 PM

@George -- thank you for the idea. Simpler is always better, isn't it?

09-27-2014, 02:16 AM	#1
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	Want to create border on image inside SVG wrapper Back again with another stupid SVG question... I want to add a border to an image inside an SVG wrapper. I tried by using "border-width="xxxxxx", and by using "style="border-width:xxxxxxx", etc, etc, etc. And those don't work worth a darn. Using "rect" inside a wrapper won't work. I have googled around unsuccessfully, so now I am stuck. Is it possible to do this? Do I have to make some sort of declaration to identify these? Any advice will be much appreciated.

09-28-2014, 02:47 PM	#5
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You can simply add a <rect> with stroke after the image (it will be drawn above it). The problem here is that it will overlap the image. Code: <svg ... viewBox="0 0 600 800"> <image height="800" width="600" xlink:href="Cover.jpg"/> <rect height="800" width="600" style="stroke-width:10;stroke:rgb(255,0,0);fill:none;"/> If you don't want that, and you want some even border around the image, you can do some math, as you did with the viewport, and put a filled <rect> behind the image: Code: <svg ... viewBox="-10 -10 620 820"> <rect height="820" width="620" x="-10" y="-10" style="fill:rgb(255,0,0);"/> <image height="800" width="600" xlink:href="Cover.jpg"/> Note the math is very simple: for a 10-unit-wide border, use "-10" instead of "0" and "820" instead of "800" (in viewBox and in the <rect> properties). Another idea would be to scale the image down, so you can skip the math, but then the borders are not even (because adding is not the same as multiplying), you don't have the same control on their size, and you need maths for the translations (now the math is divide by two): Code: <svg ... viewBox="0 0 600 800"> <rect height="800" width="600" style="fill:rgb(255,0,0);"/> <g transform="translate(300,400)"> <image height="800" width="600" x="-300" y="-400" xlink:href="Cover.jpg" transform="scale(0.95)" /> </g> Last edited by Jellby; 09-29-2014 at 04:42 AM.

09-30-2014, 01:10 PM	#8
GMcG Writer Posts: 101 Karma: 590630 Join Date: Mar 2011 Location: Munich, Germany Device: none	You could add a border to the picture itself, so you don't have the trouble with SVG or CSS. I know that you have IrfanView. There are two options in Image: 1. Change cavas size (which actually means: Add image border. You can choose a colour.). 2. Add border/frame (with a selection of defined frames). I think this is easier. George Attached Thumbnails Attached Images

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Svg wrapper and image resizing	Nabodita	ePub	24	05-02-2014 12:21 AM
How can hyperlinks be added inside SVG wrapper?	GrannyGrump	Workshop	9	03-03-2014 06:14 AM
Adding an SVG Wrapper	ghostyjack	Sigil	16	06-15-2013 05:13 AM
An Issue about a SVG wrapper	RbnJrg	Kindle Formats	29	06-10-2013 08:11 PM
svg image inside span tag in mobi file not display numbers	Hala Aly	Workshop	3	09-12-2012 08:00 AM

09-28-2014, 10:03 PM	#6
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	@Jellby, thank you. Some new tricks to play with, I love it! I don't know why my eyes glaze and my brain goes to sleep when I see the letters SVG, but I have been trying to overcome that. I will try the filled rect the next time I want a border. Thanks again.

09-29-2014, 01:13 PM	#7
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	By the way, my I say that I prefer the cover image to take the whole screen? My reader is already adding enough margins on its own (especially on thumbnails).

10-01-2014, 09:41 PM	#9
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	@George -- thank you for the idea. Simpler is always better, isn't it?

Advert

Advert