Support » Plugin: AddToAny Share Buttons » SVG custom icon files

  • Resolved wpress2010

    (@wpress2010)


    I understand how to set a custom folder for custom sharing icons. I see that if I leave the default size setting for the SVG files as 108 px by 108px, the existing SVG icon files, if moved into a cusotm folder, work and scale correctly.

    I rarely work with SVG files. I am trying to use one of those multicolor Instagram icons in place of the standard red one. There are many places on ther web where one can find the free Instagram vector (SVG) files. Despite my best efforts, I cannot get any of them to scale properly when placed in my custom icon files folder for AddToAny. I was under the impression that the CSS that addresses these SVG files would set the correct size, but this is apparently not the case.

    I have examined the existing SVG files’ code, and have experimented with the viewport size, but none of this seems to make any difference. Does anyone know how to edit a SVG file so that I can use it in my custom icon folder with AddToAny?

    TIA!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author micropat

    (@micropat)

    An SVG file’s scalability depends on a number of factors:
    https://css-tricks.com/scale-svg/

    When you find an SVG you want to use but doesn’t scale as you’d expect, your best bet is to import the file into a vector graphics editor such as Inkscape or Illustrator. Make sure the aspect ratio is 1:1, then export the file with fixed dimensions (such as 32px x 32px). Web browsers will then scale that SVG within an <img> context.

    Thanks for your reply. I have been playing around with Illustrator to see if I can Export as SVG and set the size, unchecking Responsive box. I do not yet see a place where I can set the fixed dimensions. If I rescale the image in Illustrator and then export, the results are not good: the size never appears onscreen at the intended scale. I will keep at it, though…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘SVG custom icon files’ is closed to new replies.