1

Boas pessoal,

Estou com um pequeno problema com ficheiros svg.
A situação é a seguinte: eu tenho um ficheiro inicial (também com extensão svg) que posteriormente edito (altero o texto, datas e assim) com a ajuda de uma biblioteca opentype.

A edição corre de forma perfeita e quando visualizo no browser, tudo corre como esperado.

Exemplo:

inserir a descrição da imagem aqui

Contudo, quando tento abrir o ficheiro final (.svg) num programa, por exemplo, Inkscape, o ficheiro desformata:

inserir a descrição da imagem aqui

Código do ficheiro final:

Código

1 Resposta 1

1

Cara seu SVG tinha algumas coisas estranhas. Apesar de vc poder usar uma tag <svg> dentro de outra eu achei melhor usa uma tag <g>, outra coisa era que vc estava colocando um transform:translate no css e um transform:matrix no SVG, eu acho melhor usar um ou outro... E esse matrix() do SVG seria ideal vc colocar os valores separados por vírgula, mesmo não precisando, pois alguns softwares podem confundir . com , e pode buggar a renderização... Eu usei com , e não tive problema.

Eu tb não entendi é pq vc transforma o Texto em <path>... pq vc não usa a tag <text>? https://developer.mozilla.org/pt-BR/docs/Web/SVG/Element/text

Eu fiz esses ajustes e cheguei no resultado abaixo. Abri no Illustrator e no Chrome e ficou alinhado direitinho.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 708.7 708.7" style="enable-background:new 0 0 708.7 708.7;" xml:space="preserve">
    <style type="text/css">
        .border {
            fill: none;
            stroke: #000000;
            stroke-miterlimit: 10;
        }
    </style>

    <rect class="border" width="708.7" height="708.7" />
    <g>
        <style type="text/css">
            .st0 {
                fill: none;
            }

            .st1 {
                font-family: 'Share-Regular';
                
            }

            .st2 {
                font-size: 36px;
                <!-- transform: translate(32%, 51%); -->
            }

            .st4 {
                font-size: 14px;
            }
        </style>
        <g>
            <rect x="144.3" y="337.9" class="st0" width="334.8" height="62.5" />

            <rect x="403" y="337.9" class="st0" width="161.4" height="62.5" />

            <rect x="391.2" y="338" class="st0" width="45.5" height="40" />

            <rect x="220.2" y="382.2" class="st0" width="319.5" height="10.4" />

            <rect x="207.6" y="308.3" width="292.5" height="3.9" />
            <rect x="207.6" y="385.6" width="110.7" height="3.9" />
            <rect x="390.6" y="385.6" width="108.2" height="3.9" />
            <path d="M11.95-9.07L6.08-9.07L9.00-22.82ZM17.10 0L11.12-25.20L6.98-25.20L0.90 0L4.10 0L5.51-6.37L12.53-6.37L13.90 0ZM31.39-12.74C31.39-4.86 29.88-2.38 27.65-2.38C26.14-2.38 24.19-2.52 24.19-2.52L24.19-22.68C24.19-22.68 26.35-22.82 27.68-22.82C29.84-22.82 31.39-21.35 31.39-12.74ZM34.60-13.00C34.60-23.62 31.97-25.45 26.89-25.45C24.41-25.45 21.06-25.20 21.06-25.20L21.06 0C21.06 0 24.52 0.25 27.32 0.25C32.15 0.25 34.60-2.27 34.60-13.00ZM53.06-18.11C53.06-22.54 51.55-25.45 46.08-25.45C43.09-25.45 40.00-25.20 40.00-25.20L40.00 0L43.13 0L43.13-10.44L46.33-10.44L50.94 0L54.40 0L49.46-10.94C52.02-11.95 53.06-14.40 53.06-18.11ZM49.86-17.86C49.86-13.93 48.53-13.07 46.51-13.07L43.13-13.07L43.13-22.64C43.13-22.64 44.53-22.86 46.51-22.86C49.07-22.86 49.86-21.35 49.86-17.86ZM65.27 0L65.27-2.63L62.75-2.63L62.75-22.57L65.27-22.57L65.27-25.20L57.10-25.20L57.10-22.57L59.62-22.57L59.62-2.63L57.10-2.63L57.10 0ZM78.84-9.07L72.97-9.07L75.89-22.82ZM83.99 0L78.01-25.20L73.87-25.20L67.79 0L70.99 0L72.40-6.37L79.42-6.37L80.78 0ZM101.52 0L101.52-25.20L98.60-25.20L98.60-2.66L93.06-25.20L87.95-25.20L87.95 0L90.86 0L90.86-22.54L96.37 0ZM118.76-12.71C118.76-4.97 117.68-2.38 114.44-2.38C111.20-2.38 110.12-4.97 110.12-12.71C110.12-20.63 111.20-22.82 114.44-22.82C117.68-22.82 118.76-20.63 118.76-12.71ZM121.97-12.89C121.97-21.35 120.38-25.45 114.44-25.45C108.50-25.45 106.92-21.35 106.92-12.89C106.92-4.07 108.50 0.25 114.44 0.25C120.38 0.25 121.97-4.07 121.97-12.89ZM136.01-7.13C136.01-1.76 138.17 0.25 142.16 0.25C144.40 0.25 146.20 0.11 148.03-0.18L148.03-13.21L151.02-13.21L151.02-15.84L142.56-15.84C140.26-15.84 139.54-17.50 139.54-19.58C139.54-22.43 141.16-22.82 142.96-22.82C144.04-22.82 146.20-22.39 146.63-22.28L146.63-24.91C146.20-25.06 144.86-25.45 143.03-25.45C139.32-25.45 136.48-24.62 136.48-19.26C136.48-16.99 137.20-15.70 138.89-14.69C136.58-13.86 136.01-10.66 136.01-7.13ZM142.20-2.38C140.36-2.38 139.10-4.00 139.10-6.77C139.10-10.04 139.46-13.21 142.02-13.21L145.19-13.21L145.19-2.66C144.68-2.56 143.68-2.38 142.20-2.38ZM172.80-9.04L172.80-25.20L163.87-25.20L163.87-22.57L169.67-22.57L169.67-8.78C169.67-3.28 168.77-2.45 166.18-2.45C165.60-2.45 163.58-2.59 162.54-2.77L162.54-0.11C163.69 0.07 165.56 0.25 166.39 0.25C170.96 0.25 172.80-1.26 172.80-9.04ZM189.86-12.71C189.86-4.97 188.78-2.38 185.54-2.38C182.30-2.38 181.22-4.97 181.22-12.71C181.22-20.63 182.30-22.82 185.54-22.82C188.78-22.82 189.86-20.63 189.86-12.71ZM193.07-12.89C193.07-21.35 191.48-25.45 185.54-25.45C179.60-25.45 178.02-21.35 178.02-12.89C178.02-4.07 179.60 0.25 185.54 0.25C191.48 0.25 193.07-4.07 193.07-12.89ZM206.64-9.07L200.77-9.07L203.69-22.82ZM211.79 0L205.81-25.20L201.67-25.20L195.59 0L198.79 0L200.20-6.37L207.22-6.37L208.58 0ZM229.32 0L229.32-25.20L226.40-25.20L226.40-2.66L220.86-25.20L215.75-25.20L215.75 0L218.66 0L218.66-22.54L224.17 0ZM244.33-9.07L238.46-9.07L241.38-22.82ZM249.48 0L243.50-25.20L239.36-25.20L233.28 0L236.48 0L237.89-6.37L244.91-6.37L246.28 0Z"
                class="st1 st2" style="" transform="matrix(1, 0, 0, 1, 230, 362)"/>
            <path d="M5.39 0L5.39-1.04L2.17-1.04L4.12-3.99C4.97-5.29 5.25-5.82 5.25-7.28C5.25-9.02 4.52-9.90 2.87-9.90C2.13-9.90 1.32-9.69 1.16-9.66L1.16-8.64C1.60-8.74 2.28-8.88 2.87-8.88C3.75-8.88 4.06-8.26 4.06-7.41C4.06-5.73 3.84-5.68 3.01-4.42L0.91-1.23L0.91 0ZM12.11 0L12.11-1.05L10.72-1.05L10.72-9.80L9.39-9.80L7.70-9.10L7.70-7.97L9.53-8.69L9.53-1.05L7.84-1.05L7.84 0ZM15.47 0L15.47-1.40L14.07-1.40L14.07 0ZM21.91 0L21.91-1.05L20.52-1.05L20.52-9.80L19.19-9.80L17.50-9.10L17.50-7.97L19.33-8.69L19.33-1.05L17.64-1.05L17.64 0ZM28.35 0L28.35-1.04L25.13-1.04L27.08-3.99C27.93-5.29 28.21-5.82 28.21-7.28C28.21-9.02 27.48-9.90 25.83-9.90C25.09-9.90 24.28-9.69 24.12-9.66L24.12-8.64C24.56-8.74 25.24-8.88 25.83-8.88C26.71-8.88 27.02-8.26 27.02-7.41C27.02-5.73 26.80-5.68 25.97-4.42L23.87-1.23L23.87 0ZM31.85 0L31.85-1.40L30.45-1.40L30.45 0ZM38.15 0L38.15-1.04L34.93-1.04L36.88-3.99C37.73-5.29 38.01-5.82 38.01-7.28C38.01-9.02 37.28-9.90 35.63-9.90C34.89-9.90 34.08-9.69 33.92-9.66L33.92-8.64C34.36-8.74 35.04-8.88 35.63-8.88C36.51-8.88 36.82-8.26 36.82-7.41C36.82-5.73 36.60-5.68 35.77-4.42L33.67-1.23L33.67 0ZM40.12-6.96C40.12-4.77 40.42-3.58 42.32-3.58C43.01-3.58 43.50-3.82 43.79-4.00C43.74-1.30 43.34-0.91 42.36-0.91C41.76-0.91 41.24-1.05 40.88-1.13L40.88-0.11C41.12-0.04 41.79 0.10 42.22 0.10C44.06 0.10 45.00-0.39 45.00-4.90C45.00-8.97 44.41-9.90 42.59-9.90C41.22-9.90 40.12-9.13 40.12-6.96ZM42.42-4.59C41.41-4.59 41.31-5.28 41.31-6.85C41.31-8.16 41.69-8.89 42.55-8.89C43.44-8.89 43.79-8.46 43.81-4.97C43.62-4.87 43.13-4.59 42.42-4.59ZM46.70-6.96C46.70-4.77 47.00-3.58 48.90-3.58C49.59-3.58 50.08-3.82 50.37-4.00C50.32-1.30 49.92-0.91 48.94-0.91C48.34-0.91 47.82-1.05 47.46-1.13L47.46-0.11C47.70-0.04 48.37 0.10 48.80 0.10C50.64 0.10 51.58-0.39 51.58-4.90C51.58-8.97 50.99-9.90 49.17-9.90C47.80-9.90 46.70-9.13 46.70-6.96ZM49.00-4.59C47.99-4.59 47.89-5.28 47.89-6.85C47.89-8.16 48.27-8.89 49.13-8.89C50.02-8.89 50.37-8.46 50.39-4.97C50.20-4.87 49.71-4.59 49.00-4.59ZM53.28-6.96C53.28-4.77 53.58-3.58 55.48-3.58C56.17-3.58 56.66-3.82 56.95-4.00C56.90-1.30 56.50-0.91 55.52-0.91C54.92-0.91 54.40-1.05 54.04-1.13L54.04-0.11C54.28-0.04 54.95 0.10 55.38 0.10C57.22 0.10 58.16-0.39 58.16-4.90C58.16-8.97 57.57-9.90 55.75-9.90C54.38-9.90 53.28-9.13 53.28-6.96ZM55.58-4.59C54.57-4.59 54.47-5.28 54.47-6.85C54.47-8.16 54.85-8.89 55.71-8.89C56.60-8.89 56.95-8.46 56.97-4.97C56.78-4.87 56.29-4.59 55.58-4.59Z"
                class="st1 st4" transform="matrix(1, 0, 0, 1.1, 326.3698, 391.985)" />
        </g>
        </g>
    </svg>

6
  • Desde já muito obrigado pela resposta. Quanto ao uso da tag path em vez de text, justifica-se porque isso vai ser impresso e a máquina não reconhece, não sei porque, essa tag. 25/09/2018 às 8:16
  • Hugo e qual seria a melhor forma de centrar as paths sem utilizar o atributo transform ? Eu tenho alguns svgs, completamente distintos uns dos outros, e é um pouco chato ter que fazer contas para todos, sendo que o código fica demasiado extenso. 26/09/2018 às 17:24
  • @AdrianoMaia seus SVGs foram gerados automaticamente? Parece que sim né? De qq forma, vc pode englobar os paths etc dentro de uma tag G e depois alinha com x='0' y='0' para ver se funciona melhor no seu caso... Da uma olhada aqui tb, pode ter algo que vai te ajudar developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
    – hugocsl
    26/09/2018 às 17:40
  • Eu inicialmente tenho um ficheiro svg com um determinado tamanho, criado no adobe illustrator. Depois pego nele e altero, normalmente, o texto que neles contêm para path. Aqui entra o problema, como são inúmeros templates, os formatos variam e tenho que fazer contas para todos e nem sempre fica perfeitamente centrado. Isto usando javascript, mais especificamente a biblioteca opentype 26/09/2018 às 19:56
  • 1
    @AdrianoMaia acho que eu entendi o seiu problema. Mas infelizmente não tenho conhecimento para te dar uma solução nesse caso... As vezes vc pode abrir uma pergunta no site internacional da StackOverflow em ingles, lá tem muita gente melhor qualificada para te responder :) stackoverflow.com
    – hugocsl
    26/09/2018 às 20:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .