Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tranform pathes according to transform attributes #6

Closed
nfroidure opened this issue Feb 16, 2014 · 12 comments
Closed

Tranform pathes according to transform attributes #6

nfroidure opened this issue Feb 16, 2014 · 12 comments
Assignees
@nfroidure
Labels
bug enhancement

Comments

@nfroidure
Copy link
Owner

Read the transform attributes of the element and all its parents and apply transformations before merging it.
This was referenced Mar 29, 2014
Closed
Closed
@nfroidure
Copy link
Owner Author

Made a first simple attempt of support 4a6e3e4

People can test it there
http://nfroidure.github.io/svgiconfont/

@bdusell
Copy link

bdusell commented May 11, 2015

I'm running into this too. I have icons exported from InkScape, which tends to leave transformations in the output rather than attempting to simplify them, so my icons look out of place.

As a workaround I'm simply piping my SVG files through gulp-imagemin first to flatten the transformations. Works like a charm.

var gulp = require('gulp');
var gulpImagemin = require('gulp-imagemin');
var gulpIconfont = require('gulp-iconfont');

gulp.task('iconfont', function() {
  return gulp.src('assets/**/*.svg')
    .pipe(gulpImagemin())
    .pipe(gulpIconfont())
    .pipe(gulp.dest('www/fonts/'));
});

@nfroidure
Copy link
Owner Author

@bdusell Could you provide the failing icons ? It would allow me to investigate which transformations still lead to issues.

@bdusell
Copy link

bdusell commented May 13, 2015

I'm afraid I don't have the failing icons on hand (I disposed of the originals, since they weren't doing me much good). I'll try to recreate them. I can tell you that one of the bad icons was essentially a circular path wrapped in a scale transform, and that this transformation was being ignored. So I would look at transform="scale(x, y)" as a potential trouble spot.

@paesku
Copy link

paesku commented Jul 9, 2015

While using Symbols for Sketch, I ran into some issues that transformed elements with rotation are shown outside the Artboard as you can see in this Sample.

To me the trick with the piped gulp-imagemin helped to solve this problem.

@paesku paesku mentioned this issue Jul 9, 2015
Closed
@nfroidure
Copy link
Owner Author

@paesku can you provide the SVG file you used ?

@paesku
Copy link

paesku commented Jul 28, 2015

hi @nfroidure

I exported the icon from Sketch as a svg file without cleanup:
I guess the multiple translation transformations are causing problems within the copies.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="560px" height="560px" viewBox="0 0 560 560" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
    <title>cpu</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="cpu" sketch:type="MSArtboardGroup" fill="#979797">
            <g id="CPU" sketch:type="MSLayerGroup" transform="translate(47.718785, 40.661995)">
                <path d="M80.0860615,57.5870639 L80.0860615,57.5870639 L80.0860615,412.072845 C80.0860615,399.913146 70.2288755,390.068538 58.0903584,390.068538 L412.957615,390.068538 C400.817119,390.068538 390.961912,399.915132 390.961912,412.072845 L390.961912,57.5870639 C390.961912,69.7467633 400.819098,79.5913715 412.957615,79.5913715 L58.0903584,79.5913715 C70.2308545,79.5913715 80.0860615,69.744777 80.0860615,57.5870639 L80.0860615,57.5870639 Z M50.0860615,57.5870639 C50.0860615,53.1711649 53.6673753,49.5913715 58.0903584,49.5913715 L412.957615,49.5913715 C417.378266,49.5913715 420.961912,53.1688354 420.961912,57.5870639 L420.961912,412.072845 C420.961912,416.488744 417.380598,420.068538 412.957615,420.068538 L58.0903584,420.068538 C53.6697073,420.068538 50.0860615,416.491074 50.0860615,412.072845 L50.0860615,57.5870639 L50.0860615,57.5870639 Z" id="Shape" sketch:type="MSShapeGroup"></path>
                <g id="Group" transform="translate(104.172123, 1.000000)" sketch:type="MSShapeGroup">
                    <path d="M123,10 L123,48.5913715 L123,58.5913715 L143,58.5913715 L143,48.5913715 L143,10 L143,0 L123,0 L123,10 L123,10 Z" id="Shape"></path>
                    <path d="M61,10 L61,48.5913715 L61,58.5913715 L81,58.5913715 L81,48.5913715 L81,10 L81,0 L61,0 L61,10 L61,10 Z" id="Shape"></path>
                    <path d="M0,10 L0,48.5913715 L0,58.5913715 L20,58.5913715 L20,48.5913715 L20,10 L20,0 L0,0 L0,10 L0,10 Z" id="Shape"></path>
                    <path d="M185,10 L185,48.5913715 L185,58.5913715 L205,58.5913715 L205,48.5913715 L205,10 L205,0 L185,0 L185,10 L185,10 Z" id="Shape"></path>
                    <path d="M247,10 L247,48.5913715 L247,58.5913715 L267,58.5913715 L267,48.5913715 L267,10 L267,0 L247,0 L247,10 L247,10 Z" id="Shape"></path>
                </g>
                <g id="Group-Copy" transform="translate(30.755651, 232.677665) rotate(-90.000000) translate(-30.755651, -232.677665) translate(-102.744349, 202.677665)" sketch:type="MSShapeGroup">
                    <path d="M123,10.7182743 L123,49.3096458 L123,59.3096458 L143,59.3096458 L143,49.3096458 L143,10.7182743 L143,0.718274297 L123,0.718274297 L123,10.7182743 L123,10.7182743 Z" id="Shape"></path>
                    <path d="M61,10.7182743 L61,49.3096458 L61,59.3096458 L81,59.3096458 L81,49.3096458 L81,10.7182743 L81,0.718274297 L61,0.718274297 L61,10.7182743 L61,10.7182743 Z" id="Shape"></path>
                    <path d="M0,10.7182743 L0,49.3096458 L0,59.3096458 L20,59.3096458 L20,49.3096458 L20,10.7182743 L20,0.718274297 L0,0.718274297 L0,10.7182743 L0,10.7182743 Z" id="Shape"></path>
                    <path d="M185,10.7182743 L185,49.3096458 L185,59.3096458 L205,59.3096458 L205,49.3096458 L205,10.7182743 L205,0.718274297 L185,0.718274297 L185,10.7182743 L185,10.7182743 Z" id="Shape"></path>
                    <path d="M247,10.7182743 L247,49.3096458 L247,59.3096458 L267,59.3096458 L267,49.3096458 L267,10.7182743 L267,0.718274297 L247,0.718274297 L247,10.7182743 L247,10.7182743 Z" id="Shape"></path>
                </g>
                <g id="Group-Copy-3" transform="translate(233.375850, 439.378184) rotate(-180.000000) translate(-233.375850, -439.378184) translate(99.875850, 409.378184)" sketch:type="MSShapeGroup">
                    <path d="M123,10.7182743 L123,49.3096458 L123,59.3096458 L143,59.3096458 L143,49.3096458 L143,10.7182743 L143,0.718274297 L123,0.718274297 L123,10.7182743 L123,10.7182743 Z" id="Shape"></path>
                    <path d="M61,10.7182743 L61,49.3096458 L61,59.3096458 L81,59.3096458 L81,49.3096458 L81,10.7182743 L81,0.718274297 L61,0.718274297 L61,10.7182743 L61,10.7182743 Z" id="Shape"></path>
                    <path d="M0,10.7182743 L0,49.3096458 L0,59.3096458 L20,59.3096458 L20,49.3096458 L20,10.7182743 L20,0.718274297 L0,0.718274297 L0,10.7182743 L0,10.7182743 Z" id="Shape"></path>
                    <path d="M185,10.7182743 L185,49.3096458 L185,59.3096458 L205,59.3096458 L205,49.3096458 L205,10.7182743 L205,0.718274297 L185,0.718274297 L185,10.7182743 L185,10.7182743 Z" id="Shape"></path>
                    <path d="M247,10.7182743 L247,49.3096458 L247,59.3096458 L267,59.3096458 L267,49.3096458 L267,10.7182743 L267,0.718274297 L247,0.718274297 L247,10.7182743 L247,10.7182743 Z" id="Shape"></path>
                </g>
                <g id="Group-Copy-2" transform="translate(440.296475, 232.986397) rotate(-270.000000) translate(-440.296475, -232.986397) translate(310.796475, 212.986397)" sketch:type="MSShapeGroup">
                    <path d="M123,0.718274297 L123,39.3096458 L123,49.3096458 L143,49.3096458 L143,39.3096458 L143,0.718274297 L143,-9.2817257 L123,-9.2817257 L123,0.718274297 L123,0.718274297 Z" id="Shape"></path>
                    <path d="M61,0.718274297 L61,39.3096458 L61,49.3096458 L81,49.3096458 L81,39.3096458 L81,0.718274297 L81,-9.2817257 L61,-9.2817257 L61,0.718274297 L61,0.718274297 Z" id="Shape"></path>
                    <path d="M0,0.718274297 L0,39.3096458 L0,49.3096458 L20,49.3096458 L20,39.3096458 L20,0.718274297 L20,-9.2817257 L0,-9.2817257 L0,0.718274297 L0,0.718274297 Z" id="Shape"></path>
                    <path d="M177,0.718274297 L177,39.3096458 L177,49.3096458 L197,49.3096458 L197,39.3096458 L197,0.718274297 L197,-9.2817257 L177,-9.2817257 L177,0.718274297 L177,0.718274297 Z" id="Shape"></path>
                    <path d="M239,0.718274297 L239,39.3096458 L239,49.3096458 L259,49.3096458 L259,39.3096458 L259,0.718274297 L259,-9.2817257 L239,-9.2817257 L239,0.718274297 L239,0.718274297 Z" id="Shape"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

@nfroidure nfroidure self-assigned this Nov 20, 2015
@nfroidure nfroidure mentioned this issue Apr 5, 2017
Closed
@NaridaL
Copy link
Collaborator

NaridaL commented Aug 24, 2017

OK, I added a test for @paesku 's example and it seems fine, so I'm closing this issue.

original:
image

result:
image

@NaridaL NaridaL closed this as completed Aug 24, 2017
@claudia-romano
Copy link

claudia-romano commented Apr 19, 2018 •
edited
Loading

Hi, I ran into this issue while trying to convert a svg with a transformed use element (wrapped inside an element that has a transformation as well). I have attached the failing icon. Thanks.
arrow.zip

@THISISSUBBU
Copy link

Hi, We are also facing the same Issue, SVG with a transformed use element.
We have any solution for it?

@NaridaL
Copy link
Collaborator

NaridaL commented Sep 22, 2019 •
edited
Loading

This lib doesn't support <use> elements, you'd need to create a PR.

Alternatively, you can open the file in Inkscape, select the relevant objects, and click Edit -> Clone -> Unlink Clone. This will replace the <use>s with <paths>, which should then be convertable.

Sorry for the late reply.

@ryh
Copy link

ryh commented Nov 4, 2021

some icons from healthicons.org https://healthicons.org/icon/outline/symbols/network_5g outline for example would fail, but filledstyle is ok

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.0866 9.40788C34.4835 7.95197 33.5996 6.6291 32.4853 5.5148L33.8995 4.10059C35.1995 5.40061 36.2307 6.94396 36.9343 8.64251C37.6379 10.3411 38 12.1616 38 14.0001C38 15.8386 37.6379 17.6591 36.9343 19.3577C36.2307 21.0562 35.1995 22.5996 33.8995 23.8996L32.4853 22.4854C33.5996 21.3711 34.4835 20.0482 35.0866 18.5923C35.6896 17.1364 36 15.5759 36 14.0001C36 12.4242 35.6896 10.8638 35.0866 9.40788Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5433 11.704C29.2417 10.9761 28.7998 10.3146 28.2426 9.75748L29.6569 8.34326C30.3997 9.08613 30.989 9.96804 31.391 10.9386C31.7931 11.9093 32 12.9495 32 14.0001C32 15.0507 31.7931 16.091 31.391 17.0616C30.989 18.0322 30.3997 18.9141 29.6569 19.657L28.2426 18.2428C28.7998 17.6856 29.2417 17.0242 29.5433 16.2962C29.8448 15.5683 30 14.788 30 14.0001C30 13.2122 29.8448 12.432 29.5433 11.704Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7574 9.75748C19.2002 10.3146 18.7583 10.9761 18.4567 11.704C18.1552 12.432 18 13.2122 18 14.0001C18 14.788 18.1552 15.5683 18.4567 16.2962C18.7583 17.0242 19.2002 17.6856 19.7574 18.2428L18.3431 19.657C17.6003 18.9141 17.011 18.0322 16.609 17.0616C16.2069 16.091 16 15.0507 16 14.0001C16 12.9495 16.2069 11.9093 16.609 10.9386C17.011 9.96804 17.6003 9.08613 18.3431 8.34326L19.7574 9.75748Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5147 5.5148C14.4004 6.6291 13.5165 7.95197 12.9134 9.40788C12.3104 10.8638 12 12.4242 12 14.0001C12 15.5759 12.3104 17.1364 12.9134 18.5923C13.5165 20.0482 14.4004 21.3711 15.5147 22.4854L14.1005 23.8996C12.8005 22.5996 11.7693 21.0562 11.0657 19.3576C10.3621 17.6591 10 15.8386 10 14.0001C10 12.1616 10.3621 10.3411 11.0657 8.64251C11.7693 6.94395 12.8005 5.40061 14.1005 4.10059L15.5147 5.5148Z" fill="#333333"/>
<path d="M26 14.0001C26 15.1046 25.1046 16.0001 24 16.0001C22.8954 16.0001 22 15.1046 22 14.0001C22 12.8955 22.8954 12.0001 24 12.0001C25.1046 12.0001 26 12.8955 26 14.0001Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35 27.0001H13C12.4477 27.0001 12 27.4478 12 28.0001V41.0001C12 41.5524 12.4477 42.0001 13 42.0001H35C35.5523 42.0001 36 41.5524 36 41.0001V28.0001C36 27.4478 35.5523 27.0001 35 27.0001ZM13 25.0001C11.3431 25.0001 10 26.3432 10 28.0001V41.0001C10 42.6569 11.3431 44.0001 13 44.0001H35C36.6569 44.0001 38 42.6569 38 41.0001V28.0001C38 26.3432 36.6569 25.0001 35 25.0001H13Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 30.0001C22 29.4478 21.5523 29.0001 21 29.0001H15.75C15.2733 29.0001 14.8629 29.3365 14.7694 29.804L14.0194 33.554C13.9401 33.9506 14.1075 34.3559 14.4436 34.581C14.7796 34.806 15.2182 34.8065 15.5547 34.5821C15.7657 34.4415 16.6978 34.0001 18 34.0001C19.1046 34.0001 20 34.8955 20 36.0001C20 37.1046 19.1046 38.0001 18 38.0001H17.1682C16.5907 38.0001 16.1138 37.6401 15.9405 37.1604C15.7529 36.6409 15.1798 36.3719 14.6603 36.5595C14.1409 36.7471 13.8719 37.3203 14.0595 37.8398C14.5174 39.1079 15.7437 40.0001 17.1682 40.0001H18C20.2091 40.0001 22 38.2092 22 36.0001C22 33.7909 20.2091 32.0001 18 32.0001C17.3891 32.0001 16.8274 32.0724 16.3335 32.1817L16.5698 31.0001H21C21.5523 31.0001 22 30.5524 22 30.0001Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.6739 30.362C33.0856 30.7302 33.1208 31.3623 32.7526 31.774C32.3844 32.1856 31.7522 32.2209 31.3406 31.8527C30.8744 31.4357 30.3041 31.1503 29.6884 31.0278C29.0088 30.8927 28.3044 30.962 27.6642 31.2272C27.024 31.4924 26.4769 31.9414 26.0919 32.5176C25.7069 33.0937 25.5014 33.7711 25.5014 34.464C25.5014 35.1569 25.7069 35.8343 26.0919 36.4104C26.4769 36.9866 27.024 37.4356 27.6642 37.7008C28.3044 37.966 29.0088 38.0354 29.6884 37.9002C30.1642 37.8055 30.6128 37.6136 31.0073 37.3389V35.464H29.0049C28.4527 35.464 28.0049 35.0163 28.0049 34.464C28.0049 33.9117 28.4527 33.464 29.0049 33.464H32.0073C32.5595 33.464 33.0073 33.9117 33.0073 34.464V37.8207C33.0073 38.1053 32.886 38.3764 32.6739 38.5661C31.9417 39.221 31.0458 39.6694 30.0786 39.8618C29.011 40.0741 27.9045 39.9651 26.8988 39.5486C25.8932 39.132 25.0337 38.4266 24.429 37.5216C23.8242 36.6165 23.5014 35.5525 23.5014 34.464C23.5014 33.3755 23.8242 32.3115 24.429 31.4064C25.0337 30.5014 25.8932 29.796 26.8988 29.3795C27.9045 28.9629 29.011 28.8539 30.0786 29.0663C31.0458 29.2587 31.9417 29.707 32.6739 30.362Z" fill="#333333"/>
</svg>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nfroidure nfroidure

Labels
bug enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@ryh @nfroidure @paesku @bdusell @claudia-romano @THISISSUBBU @NaridaL