[Feature Request] SVG image import
- Thread starter adracamas
- Start date
lebaston100
Member
You can use the browser source and create a local file in the same folder as the svg. Just call it something like logo.html, ignore the html head stuff and just use this code: "<img src="filename.svg" style="width: 100%">"
datro
New Member
I'm not sure I understand your suggestion. I'm new to OBS, but after diving into this a bit it seems that a "media source" is for things like playing a video as an OBS source. SVG files are vector files produced with tools like Inkscape or Adobe Illustrator. Can you elaborate on how I would use a media source to work with SVG files? Ultimately what I need is just a "Image Slide Show" source that can work with SVG files.
.SVG will be a great adition to OBS!
Tried it now to confirm that OBS can't handle .svg files using Media Source, neither throught Image Source.
The solution that lebaston100 suggest, creating a .html and using browser source can pull the .svg into OBS, but lacks it's escalability. It pulls the image as bitmap (jpg, png, gif) then you can see pixels, not a vector file (svg, pdf, eps, ai), that you can upscale 1000x and do not see pixels.
Tried it now to confirm that OBS can't handle .svg files using Media Source, neither throught Image Source.
The solution that lebaston100 suggest, creating a .html and using browser source can pull the .svg into OBS, but lacks it's escalability. It pulls the image as bitmap (jpg, png, gif) then you can see pixels, not a vector file (svg, pdf, eps, ai), that you can upscale 1000x and do not see pixels.
Antone-dev
New Member
For anyone in the future, dodgepong probably meant Browser Source. Or it has been renamed. SVGs can be handled in OBS with a Browser Source set to local file.
falti
Member
Megami
New Member
Except that doesn't really solve the problem. PNG is a raster format, while SVG is a vector format. The point of keeping SVG is maintaining the same resolution regardless of size, something raster formats do not do.
Fanaro009
New Member
Omg. This works actually. Thanks @lebaston100!
You can also actually load the local SVG as a local file directly through the Browser Source, which is much simpler.
I usually just create a
.html file with the code below and use a browser source. It autoscales the .svg file to the size of window (width, height) without distortion. Replace /path/to/image.svg with your own file path.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Auto Scaling</title>
<style>
/* Ensure the body and html take up the full screen */
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* Prevent scrolling */
}
/* Container that makes the SVG fill the screen */
.svg-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Make the SVG fill the container, scaling while maintaining its aspect ratio */
img {
width: 100%;
height: 100%;
object-fit: contain; /* Ensures the image scales without distortion */
}
</style>
</head>
<body>
<div class="svg-container">
<!-- Use the image tag to include the external SVG file -->
<img src="/path/to/image.svg" alt="SVG Image" />
</div>
</body>
</html>However, I noticed significantly high CPU usage from obs-browser when opening animated SVG files. So I resolved to use electroncapture with file:// URI and OBS window capture instead.