Request for an SVG Version with Border Support #137
Comments
|
Hi, I don't plan to add that as an option, however you can manipulate the generated svg There is likely nice way to do it by parsing the svg and manipulating svg element, I wrote a hacky script to manipulate the svg string instead // read the svg file as string
// [...]
// extract the svg viewBox values
const [, vb] = svgContent.match(/viewBox="([^"]*)"/);
const [minX, minY, width, height] = vb
.trim()
.split(" ")
.map((x) => +x);
const viewBox = { minX, minY, width, height };
// generate the border as rect
const strokeWidth = 1;
const svgBorder = `<rect
x="${viewBox.minX + strokeWidth / 2}"
y="${viewBox.minY + strokeWidth / 2}"
width="${viewBox.width - strokeWidth}"
height="${viewBox.height - strokeWidth}"
rx="12"
stroke="#e4e2e2"
stroke-width="${strokeWidth}"
fill="none"
/>`;
// append the rect at the end of the svg
const svgContentWithBorder = svgContent.replace("</svg>", svgBorder + "</svg>");
// write the svg file
// [...]it looks like this
you might want to add some more padding by manipulating the viewBox param |
|
Hi @Platane, I'm a beginner in front-end development, so please excuse any mistakes in my question. Your response seems to suggest using JavaScript to add a border to the SVG image. However, I want to use this SVG in my GitHub Profile, and GitHub doesn't support JavaScript. I also tried using the Could you help me add a border directly to the SVG? Also, this action can provide a manual or steps that other users can follow to do like this. Code in GitHub ProfileI've used different param to generate 2 version of sig image to invert in different system settings. Source CodeLink: README.md Additional NotesI understand this may not be part of your responsibilities, and if you're too busy or unable to help, I completely understand. However, I would be truly grateful if you could take some time to help me figure out this problem, which has been confusing me for several days. Thank you so much in advance! 🥺 |
|
what you can do is manipulate the svg when it's created: when the github action runs I think the cleanest way to achieve that would be to fork this action. Or you can insert a step to the github action workflow. For example with github-script which allows to run js code |
|
Genius! I was stuck in HTML format which didn't support JS and CSS. But now I can use JS in GitHub Actions! Thanks for the tip, truly! |
Background:
First of all, thank you for developing and maintaining this fun and useful project! While using the GitHub Snake contribution graph, I encountered a small issue:
Currently, the generated SVG file does not have a border, while other components in my GitHub README (such as GitHub Stats and Streak Stats) have borders by default. This creates a visual inconsistency, as the elements look mismatched due to different border styles.
Request:
I would like to have an option to generate an SVG version with a border, so that it aligns with other GitHub components that already have borders, improving the overall consistency and visual appeal of the page.
My Questions:
Is there already a way to generate an SVG version with a border?
If this feature is not currently available, could you consider adding it in a future version?
Conclusion:
I would greatly appreciate it if this feature could be added in future versions, as it would make GitHub profile presentations more consistent and visually appealing.
Thanks again for your work on this project, and I look forward to your response!😊
The text was updated successfully, but these errors were encountered: