Lighthouse Report SVG Embed is a tool that helps you display Lighthouse reports in a visually appealing way directly on your site, README, or other documentation. This tool was created to provide a simple and effective way to embed performance and audit reports without needing a separate installation.
When looking to embed Lighthouse reports into a README or other documents, there wasn't an easy solution available. This tool fills that gap by offering a straightforward way to generate and embed SVG reports from Lighthouse metrics. Simply use the provided URL syntax to customize and display your report.
- No Installation Required: Deployed on Vercel, so you can use it directly via URL.
- Customizable SVG Reports: Adjust performance, accessibility, best practices, SEO, and PWA metrics through URL parameters.
- Easy Integration: Use the URL as an image source in markdown files, similar to other badges.
To embed a Lighthouse report SVG, use the following URL format:
https://lighthouse-report-svg.vercel.app/?perf=100&acc=40&best=30&seo=58&pwa=4
perf
(Performance): A value between 0 and 100.acc
(Accessibility): A value between 0 and 100.best
(Best Practices): A value between 0 and 100.seo
(SEO): A value between 0 and 100.pwa
(Progressive Web App):0
- No badges1
- Just fast and reliable2
- Just installable3
- Fast and reliable and installable4
- Full PWA
Example of embedding the SVG in a markdown file:
![Lighthouse Report](https://lighthouse-report-svg.vercel.app/?perf=85&acc=90&best=80&seo=70&pwa=3)
You can customize the report by modifying the URL parameters. Each parameter directly affects the SVG output, allowing you to tailor the report to reflect your specific metrics.
Contributions are welcome! If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or fix.
- Submit a pull request with a detailed description of your changes.
Please adhere to the Code of Conduct when contributing.
This project is licensed under the MIT License. See the LICENSE file for more details.
For questions or support, please reach out to f.borisjuk@hangerthem.com.
This tool leverages the capabilities of Vercel for deployment and showcases the versatility of Lighthouse metrics.