Remove border when ggsave svg is embedded in html file

Question

I have created a svg using ggplot2::ggsave(). I embed the svg inline in a html file. However, I find that there is a border around the svg. How do I remove this border?

tl;dr version: download this html, how do I remove the border around the inline svg?

Here is the code I used to create the svg:

dput of statistics_data:

statistics_data <-
 structure(list(Category = structure(c(5L, 1L, 1L, 1L, 1L, 1L, 
1L, 1L, 1L, 1L, 1L, 1L, 5L, 5L, 5L, 5L, 2L, 2L, 3L, 3L, 3L, 3L, 
4L, 5L, 3L, 5L, 5L, 5L, 1L, 1L, 1L), .Label = c("Online Presence", 
"Social Presence", "Web Design", "Web Development", "Website Content"
), class = "factor"), Category_count = c(9L, 14L, 14L, 14L, 14L, 
14L, 14L, 14L, 14L, 14L, 14L, 14L, 9L, 9L, 9L, 9L, 2L, 2L, 5L, 
5L, 5L, 5L, 1L, 9L, 5L, 9L, 9L, 9L, 14L, 14L, 14L), Category_name = c("Website Content (9)", 
"Online Presence (14)", "Online Presence (14)", "Online Presence (14)", 
"Online Presence (14)", "Online Presence (14)", "Online Presence (14)", 
"Online Presence (14)", "Online Presence (14)", "Online Presence (14)", 
"Online Presence (14)", "Online Presence (14)", "Website Content (9)", 
"Website Content (9)", "Website Content (9)", "Website Content (9)", 
"Social Presence (2)", "Social Presence (2)", "Web Design (5)", 
"Web Design (5)", "Web Design (5)", "Web Design (5)", "Web Development (1)", 
"Website Content (9)", "Web Design (5)", "Website Content (9)", 
"Website Content (9)", "Website Content (9)", "Online Presence (14)", 
"Online Presence (14)", "Online Presence (14)")), .Names = c("Category", 
"Category_count", "Category_name"), row.names = c(NA, -31L), class = "data.frame")

Create a pie chart using ggplot2:

   p <- ggplot(data = statistics_data,
                aes(x = factor(1),  fill = factor(Category))
    ) +
        geom_bar(width = .2, stat = "bin") + 
        xlab('') +
        ylab('') +
        theme(axis.ticks = element_blank(),
              axis.text.y = element_blank(),
              panel.grid.major=element_blank(),
              panel.background = element_rect(fill = 'transparent'),
              plot.background = element_rect(fill = 'transparent'),
              legend.background = element_rect(fill = 'transparent'),
              panel.border = element_rect(colour = NA, fill = NA)) +
        scale_fill_manual(values = c("Online Presence" = "#4b67b9", "Social Presence" = "#d85341", "Web Design" = "#ff8b24", "Web Development" = "#aad32e", "Website Content" = "#fec52e") 
                          , breaks = sort(unique(statistics_data$Category))
                          , labels = sort(unique(statistics_data$Category_name))
                          ) + 
        scale_y_continuous(breaks = NULL) +
        coord_polar(theta="y") +
        labs(fill = 'Ranking Factor Category', x = NULL, y = NULL)

Use ggsave to save the pie chart:

ggsave("test_pie_chart.svg", width = 5, height = 3, dpi = 300, bg = "transparent")

Then embed the svg in a html file, which can be downloaded here.

There is a border around the svg! How do I get rid of it?

Answer 1

That was a challenge, Alex! Unfortunately there's no argument to pass to grDevices to control the border, so you have to set the transparency in the theme as you've tried. I've tried element_blank() for the following options and think it works:

panel.background = element_blank(),
plot.background = element_blank(),
legend.background = element_rect(fill = 'transparent'),
panel.border = element_blank()) +

Perhaps you could try it and confirm this works as intended?

Answer 2

I have a hack that I've been using.

First you need to identify in your svg file where the offending line that draws the border is. Open your output svg file using a text file. It would be usually located the first 20 or so lines and have the format:

<rect x='2.26' y='0.00' width='355.47' height='216.00' style='stroke-width: 1.07; stroke: #FFFFFF;'/>

The number will likely be different but this tells it to draw a rectangle of white border at the coordinate (2.26, 0) of width 355.47 and height 216.

You can manually delete this line. If you want to delete it automatically, say that the offending line is line 15. Then add the following line after you make the plot.

afile <- "image.svg"
ggsave(p, filename=afile, bg="transparent")
graph <- readLines(afile, -1)
graph[15] <- ""
writeLines(graph, afile)

This will read the file, replace the offending line with an empty line and overwrite the existing file.