SVG obhect centering issue

[anna_craneo]

Hi, I'm using DITA-PDF (WYSISYG) transformation with CSS via PDF chemistry.
I want my logo to be at the top center of the front page.
For better quality I want to use .svg object, not a regular image.

The issue is that it does not work for svg, object is always at the top-left position:

Code: Select all

@page front-page {

  @top-left-corner {

    content: none

  }

  @top-left {

    content: none

  }

  @top-center {

    content: url("..\img\my-logo.svg");

    margin: auto;

    display:block;

  }

Though it is ok for images:

Code: Select all

@page front-page {

  @top-left-corner {

    content: none

  }

  @top-left {

    content: none

  }

  @top-center {

    content: url("..\img\my-logo.png");

    margin: auto;

    display:block;

  }

How can I center svg?

[Dan]

Hello Anna,

Your CSS is good, it works for me when I refer a small-size SVG sample. Can you send us an SVG that exhibits the problem? You can use the technical support form.

The lines:

Code: Select all

  margin: auto;

  display:block;

are not necessary, the content of a @top-center page margin box has the property "text-align" set to "center".

Another way of using an image is to set it as a background image of the page:

Code: Select all

@page front-page {

  background-image:url("some.svg");

  background-position:50% 5%; /* the first is the alignement on the X axis, the second, on Y.*/

  background-repeat:no-repeat;

  

  @top-left-corner {

  .....

  }

  ....

 }

Best regards,
Dan

[anna_craneo]

Hi,

Thanks for the tip. First way works okay with small images (<300 px) but is not applicable for the bigger ones.