Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
troyhimes
Resolver I
Resolver I

SVG Custom Icons appear with unwanted border

On many of my imported svg icons they include a very thin (1 pixel? highlighted w/red box) partial border.  This border is not present when viewing in Powerpoint.  How do I get rid of it?

 

troyhimes_0-1674409443443.png   

troyhimes_1-1674409484582.png

 

 

5 REPLIES 5
fr_jc
Advocate I
Advocate I

I also have had this problem for quite some time now and have never found a way around it.  I do notice that it will sometimes not be noticable if i resize the frame.

I wasn't sure if it was because i was creating my svg's using inkscape, but similar to nfd, if I view the svg in a browser or other type of application it appears as expected.

VahidDM
Super User
Super User

Hi @troyhimes 

 

The thin border you are seeing on your imported SVG icons is likely caused by the way the SVG file is constructed. One possible solution to remove this border is to edit the SVG file using a vector graphics editor such as Adobe Illustrator or Inkscape.

Here are the general steps to remove the border:

  1. Open the SVG file in a vector graphics editor.
  2. Locate the element that is causing the border. This is typically a rectangle or path element that is slightly larger than the icon itself.
  3. Delete or adjust the element to remove or reduce the border.
  4. Save the SVG file and re-import it into your Powerpoint presentation.

Another way to remove the border is to import the svg into a code editor and check the styles of the element causing the border, and try to remove the style that is causing the border, then save and import it again.

It is also possible that the border is caused by a transparent pixel in the SVG file, so you can try to open the SVG file in an image editor, such as Adobe Photoshop or GIMP, and check for any transparent pixels around the icon, and then remove them and save the file.

Please note that depending on the complexity of the SVG file, it may be difficult to locate the element causing the border, so you may need to experiment with different editing techniques to find the best solution.

 

If this post helps, please consider accepting it as the solution to help the other members find it more quickly.

Appreciate your Kudos!! 

Badges.jpg

LinkedIn | Twitter | Blog | YouTube 

@VahidDM, thanks for the response.

 

Since I'm an svg novice I downloaded Inkscape and viewed the expand arrows from my original post.  The extraneous lines don't appear when viewed in Inkscape and it doesn't look like there is an extra rectangle ( I may not be interpreting that correctly).

 

You're right...the xml looks like latin to me.

 

Since I'm able to view the svg file w/o any funky borders in any other software I open it in, is it possibly a Power BI issue?

 

troyhimes_0-1674484611154.png

<!doctype html>
<svg viewBox="144.374 112.979 122.88 122.88" width="122.88" height="122.88">
  <g transform="matrix(1, 0, 0, 1, 144.373947, 112.9786)">
    <path class="st0" d="M0,122.88l1.01-51.25L17.18,87.8c15.42-15.43,17.1-17.11,32.53-32.53l17.9,17.91 C52.19,88.6,50.51,90.28,35.08,105.7l16.17,16.17L0,122.88L0,122.88L0,122.88z M122.88,0L71.62,1.01l16.17,16.17 C72.37,32.6,70.69,34.29,55.27,49.71l17.9,17.91c15.43-15.42,17.11-17.11,32.53-32.53l16.17,16.18L122.88,0L122.88,0L122.88,0z" style="clip-rule: evenodd; fill-rule: evenodd;"></path>
  </g>
</svg>

 

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

  <g transform="matrix(1, 0, 0, 1, 144.373952, 112.978603)">

    <path class="st0" d="M0,122.88l1.01-51.25L17.18,87.8c15.42-15.43,17.1-17.11,32.53-32.53l17.9,17.91 C52.19,88.6,50.51,90.28,35.08,105.7l16.17,16.17L0,122.88L0,122.88L0,122.88z M122.88,0L71.62,1.01l16.17,16.17 C72.37,32.6,70.69,34.29,55.27,49.71l17.9,17.91c15.43-15.42,17.11-17.11,32.53-32.53l16.17,16.18L122.88,0L122.88,0L122.88,0z" style="clip-rule: evenodd; fill-rule: evenodd;"></path>

  </g>

</svg>

I'm experiencing the same issue. SVG looks as expected if imported in an HTML visual, but contains hairlines around the border when imported as a button icon. 

 

Curious if you were able to find a work around or fix?

Hi @nfd , no didn't ever find a solution.  Workaround was to find similar SVG's that didn't have the extraneous pixels

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

AugPowerBI_Carousel

Power BI Monthly Update - August 2024

Check out the August 2024 Power BI update to learn about new features.

August Carousel

Fabric Community Update - August 2024

Find out what's new and trending in the Fabric Community.