24 days ago
When utilized as an image src attribute, an SVG that includes foreignObject varies in height.
As a developer, I'm experimenting with image manipulation by copying an image to a foreignObject inside an SVG element, serialize it, and use it as a "data" image source. However, the element renders inconsistently in Chrome compared to Firefox. Does anyone have an explanation why this is the case and how we can ensure consistency? My HTML code includes a div with a list, an SVG blueprint, an iframe displaying the list in an SVG with a foreignObject, and an IMG element with the same SVG serialized as its source. To resolve the inconsistency, I'm seeking suggestions from experienced developers.
23 days ago
SourcesEmbedded Content — SVG 2 - W3What is the best way to serialize SVG from the client DOM?Adding vector graphics to the web - Learn web development | MDN<foreignObject> - SVG: Scalable Vector Graphics | MDNOther content in SVG - SVG: Scalable Vector Graphics | MDNProblems with getting canvas dataURI from svg with foreignObject
24 days ago
Unfortunately, it's difficult to say what the exact cause of the rendering difference is without more information. However, some things you could try to make it display consistently across browsers include: 1. Setting the margin, padding, and box-sizing properties to 0 on all elements to ensure consistent box models. 2. Setting the font-size property to 0 on the parent element of the list, and then setting font-size back to the desired size on the li elements to eliminate any potential white space between the list items. 3. Ensuring that all elements have defined dimensions so that content will be laid out consistently. 4. Checking for any browser-specific quirks related to the use of foreignObject and/or SVG. Additionally, you might consider using a different approach to achieve your desired outcome, as the method you are using may not be the most reliable or widely-supported. For example, you could try using the canvas element to convert an HTML element to an image, or using a dedicated library like html2canvas or dom-to-image to handle the conversion.