Forum How do I...?

svg opacity

fbrzvnrnd
Hi,

I was trying to understand if there is a way to draw a svg image (ex: circle) in a @page place (ex: @top-left) with an opacity different page from page, using a cymk color.
I was thinking something like:
@bottom-center{
	
	background-image:url("imagines/circle.svg");
	opacity:counter(page)} 


but the opacity had to be in 0.x value and it seems not working with standard decimal value too.

It is a dead end, or there is something I can try?

Thank you.



f.
mikeday
I think you could use the fill-opacity property inside the SVG file?
fbrzvnrnd
I try this:
<g alignment-baseline="baseline"><circle r="20" cx="20" cy="20" stroke="black" stroke-width="3" stroke-opacity="0.2" fill="none"></circle></g>


and

 @bottom-center{content: counter(page);
	font-style: italic;
	font-size:0.8em;
		background-image:url("imagines/cerchio.svg");

	}


But Prince seems to keep the 1.00 opacity value.
Anyway, if even this worked, I don't think I can automatically change the opacity value for each page. If my goal (for example) is that the circle is white in page 1 of the book and black in page 200 of the book, and gradually more grey by opacity from 2 to 199 page, how can not use the counter(page) value to change the stroke-opacity in svg?


Thank you


Fabrizio
mikeday
Okay that is difficult, but a cool idea! At the moment I don't think it is possible, as page counters can't be used with opacity properties, and prince-script() doesn't allow you to choose a different image for each page. But hopefully it will be possible in the future, if we can extend generated content.
fbrzvnrnd
No problem, I'm studying for a paper-ebook layout, so I'm making test to find the definitive css for paper and after for ebook. Only 3 last question, when you can answer:

a) why the stroke-opacity="0.2" in svg didn't work in svg?
b) if I have an SVG image with cymk colors, what syntax I have to use to define cymk colors? I tried:

<g alignment-baseline="baseline"><circle r="20" cx="20" cy="20" stroke="black cmyk(35%,0%,17%,72%);" stroke-width="3" stroke-opacity="0.2" fill="black cmyk(35%,0%,17%,72%);"></circle></g>


but I got a black circle with trasparent stroke...

c) I tried to use variable and calculation in css:
test {var-dimensione:calc(counter(page)*100/counter(pages))}
h2{font-size:var(dimensione);}


As I expected this is not working. Are var- and calc supported by Prince?

Thank you for the answer.



Fabrizio
mikeday
Here is an example that uses stroke-opacity and CMYK colors, does it work for you?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <line x1="0" y1="100" x2="100" y2="0" stroke-opacity="1.0" stroke-width="10" stroke="blue"/>
    <line x1="0" y1="0" x2="100" y2="100" stroke-opacity="0.5" stroke-width="10" stroke="red"/>
    <circle r="20" cx="50" cy="50" stroke="cmyk(0.35,0,0.17,0.72)"
        stroke-width="3" stroke-opacity="0.2" fill="cmyk(0,0,1,0)"></circle>
</svg>

Currently Prince does not support var and calc in CSS.
fbrzvnrnd
Thank you for the answer, I'll try the SVG as soon as I can.
fbrzvnrnd
I'm back again: I'm trying to use prince to have an cymk PDF from Inkscape svg.
I see a problem is in style like:

 style="line-height:82.99999833%;letter-spacing:0px;fill='cmyk(1,0.2,0,0.5)'">


In previous example the cymk is not used by Prince. If I put the fill outside the style:

 fill='cmyk(1,0.2,0,0.5)' style="line-height:82.99999833%;letter-spacing:0px">


Is working.

Is this a bug or I'm missing something?

Another question: is there a way to 'be sure' Prince is generating a pure cymk pdf? Something like warning about RGB colorspace or images?

Thank you.

f.
mikeday
The syntax is wrong, it should be "fill: cmyk(...)" not "fill='cmyk(...)'" if it is already inside a style attribute.

There isn't a way for Prince to check if the PDF is pure CMYK, but Acrobat has "preflight" checks for this, and other profiles.
fbrzvnrnd
Doh! Sorry for the silly question, everything is working fine using the right syntax.
Thank you.


Fabrizio
fbrzvnrnd
I have another question about SVG and Prince. I'm converting an RGB inkscape SVG to CYMK PDF using Prince and CSS. It is a magazine cover. In Inkscape I put an image on the border of the cover, and the image "goes out" of paper. I usually do this to allow the full bleed printing. I do this with Prince in past, using XHTML and CSS, and it works fine.
But if I save from Inkscape the .svg, the file did not show the "out of paper" image. I try to add the marks:crop cross in CSS, but the "out of paper" part of image is not showed.
Have you some suggestion for this?

Thank you.
mikeday
I'm not sure I understand. To bleed out of the main page area, you will need to position it or give it some negative margin.
fbrzvnrnd
I attach a screenshot: the original in Inkscape (left), the result PDF via prince (right).
  1. Schermata 2014-09-20 alle 14.48.02.png183.9 kB
mikeday
So is the whole document one SVG, not just the photo? I'm afraid you will need to attach an example document, or make it more clear exactly what is going on. :)
fbrzvnrnd
yes, sorry. I'll make some other test before.
Thank you for the answer.