Inkscape.org
Beyond the Basics Optimize SVG for website
  1. #1
    Helkowsky Helkowsky @Helkowsky
    *
    <?xml version="1.0" encoding="UTF-8"?>
    <svg width="22.785mm" height="42.532mm" version="1.1" viewBox="0 0 22.785 42.532" xmlns="http://www.w3.org/2000/svg">
     <g transform="translate(-95.295 -33.594)">
      <path d="m101.98 49.667h-6.6817v7.2163h6.6817v19.243h8.7531v-19.177h5.8799l1.2695-7.2831h-7.0158v-5.6795c0-1.8041 1.1333-3.107 3.107-3.107h4.1093v-6.782c-3.8754-0.66817-15.903-2.4054-16.036 9.0872z"/>
     </g>
    </svg>
    

    Hi all, I am really a beginner an I use Inkscape only to make some simple SVG for my website.

    I have created an SVG using optimized SVG. but it creates this <g transform="translate(-95.295 -33.594)">, as per my understanding it is because it is not center in the middle ?

    I have created the facebook logo here, and I have used this shortcut CTRL + SHIFT + R, to fit the caneva to my path. Here is the generated code (first time I am posting so i guess the code snippet is on the top). My question is simple how to create the same without this "<g transform="translate(-95.295 -33.594)">" ?

    Thank you in advance to the people who gonna help me.

     

  2. #2
    Tyler Durden Tyler Durden @TylerDurden

    I'd use the Objects dialog to change the layer to a group (click icon in the T column), then ungroup the objects before saving as an optimized svg.

     

  3. #3
    Helkowsky Helkowsky @Helkowsky

    Hi Tyler,

    Thank you for your answer, as I said I am not an Inkscape specialist. But in the dialog box there is only 1 layer. I have tried to group and ungroup the object as well. I think it is more related to the viewbox cause the value of transform differe if I move my object elsewhere in Inkscape.

     

     

  4. #4
    Tyler Durden Tyler Durden @TylerDurden

    The layer must be converted to a group using the T column icon, then it can be ungrouped, removing the transform.

     

  5. #5
    Helkowsky Helkowsky @Helkowsky
    <svg width="22.785mm" height="42.532mm" version="1.1" viewBox="0 0 22.785 42.532" xmlns="http://www.w3.org/2000/svg">
     <g transform="translate(-53.066 -65.132)">
      <path d="m59.748 81.205h-6.6817v7.2163h6.6817v19.243h8.7531v-19.177h5.8799l1.2695-7.2831h-7.0158v-5.6795c0-1.8041 1.1333-3.107 3.107-3.107h4.1093v-6.782c-3.8754-0.66817-15.903-2.4054-16.036 9.0872z"/>
     </g>
    </svg>
    

    Thank you Tyler you made it very clear. I have tried several times but I still have this group in optimized SVG, which has this transform translate attribute. If I remove it it seems to disappear from the viewbox.

     

  6. #6
    Helkowsky Helkowsky @Helkowsky

    After lot of search and many tries, it seems that the short cut "Shift Ctrl R" resize page to selection and creates this group and the translate. I have then recreate the SVG using the "Ctrl Shift D" and resized based on the output size widht"22.785" height"42.532" under the custom size. I have deleted the imported svg and recreate the same one, I have saved it and the group disappeared.

    this thread help me:

    https://alpha.inkscape.org/vectors/www.inkscapeforum.com/viewtopicb633-2.html?t=17884

    If you have an easier way to solve this would be brilliant.

  7. #7
    Helkowsky Helkowsky @Helkowsky

    The other way  as described in the thread, is to open the xml editor, remove the transform translate, and repalce it manually in the sized page.

     

     

  8. #8
    Aero Aero @Aero◻️

    Have you tried snapping the paths bounding box corner to page corner before resizing with (shift+ctrl+r)?

  9. #9
    Tyler Durden Tyler Durden @TylerDurden
    *

    Helkowsky, What is the state of the Store Transforms in your preferences?

     

    Preferences Transforms