1
Good staff,
I’m having a little problem with svg files.
The situation is as follows: I have an initial file (also with svg extension) which I subsequently edit (change text, dates and so) with the help of a library opentype.
The editing runs perfectly and when I visualize in the browser, everything goes as expected.
Example:
However, when I try to open the final file (.svg) in a program, for example, Inkscape, the format file:
Code of the final file:
1
Your SVG guy had some weird stuff. Although you could use a tag <svg> inside another I thought it best to use a tag <g>, another thing was that you were putting a transform:translate in css and a transform:matrix in the SVG, I think I’d better use one or the other... And this one matrix() SVG would be ideal if you put the values separated by comma, even if you do not need, because some software may confuse . with , and can bugging the rendering... I used with , and had no problem.
I didn’t understand it is because you turn the Text into <path>... pq vc does not use the tag <text>? https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
I made these adjustments and arrived at the result below. I opened in Illustrator and Chrome and was aligned right.
<?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>Browser other questions tagged html xml svg
You are not signed in. Login or sign up in order to post.
Thank you so much for your answer.
pathinstead oftext, is justified because this will be printed and the machine does not recognize, I do not know why, this tag.– Adriano Maia
Hugo and what would be the best way to center paths without using the attribute
transform? I have somesvgs, completely distinct from each other, and it’s a bit boring to have to do math for everyone, the code gets too long.– Adriano Maia
@Adrianomaia your Svgs were generated automatically? Looks like yes right? Anyway, you can enclose the paths etc within a G tag and then align with x='0' y='0' to see if it works better in your case... Take a look here also, you may have something that will help you https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
– hugocsl
I initially have a svg file with a certain size, created in adobe Illustrator. Then I take it and change, normally, the text they contain to path. Here comes the problem, as there are numerous templates, the formats vary and I have to do accounts for everyone and is not always perfectly centered. This using javascript, more specifically the opentype library
– Adriano Maia
@Adrianomaia I think I understand the problem seiu. But unfortunately I have no knowledge to give you a solution in this case... Sometimes you can open a question on the international site of Stackoverflow in English, there are many people better qualified to answer you :) https://stackoverflow.com
– hugocsl
Thank you Hugo :)
– Adriano Maia