Converting HTML to PDF with CSS using Android Itext is only functional when applied directly to SVG elements

Hey there! I'm currently using the itext library (html2pdf) to convert my HTML into a PDF. Everything seems to be working fine, except for the SVG styles.

Specifically, this is the part of my HTML code that's causing issues:


<style>
  .my-svg{
      width: 3.3mm;
      height: 3.3mm;
      margin-right: 0.4mm;
      fill: red;
  }
</style>

<svg class="my-svg" width="90.507" height="90.671" viewBox="0 0 23.947 23.99" xmlns="http://www.w3.org/2000/svg">
  <path class="darkable" d="PATH" style="stroke-width:.264583;fill-opacity:1" transform="translate(-66.675 -125.148)"/>
</svg>

I attempted to apply the style inline, which did work. However, due to internal constraints (the HTML is dynamically generated and cannot have inline styles set), I need the styles to be under a style tag.

If you have any insights on why this might be happening or suggestions on how to resolve it, I'd really appreciate your input!

PS: This is the method I use to convert my HTML:


val dir = createPDFReportDirectory()
val pdfFile = File(dir, "$name.pdf").apply { createNewFile() }
val pdfWriter = PdfWriter("$dir/$name.pdf")
val pdfDocument = com.itextpdf.kernel.pdf.PdfDocument(pdfWriter)

val inputStream = ByteArrayInputStream(html.toByteArray())
HtmlConverter.convertToPdf(inputStream, pdfDocument)

Answer №1

After some trial and error, I finally discovered a solution to achieve what I had been wanting to do. It turns out that all I needed to do was wrap my SVG tag within a div element.

Take a look at the code snippet below:

<style>
    .phone-svg{
        width: 3.3mm;
        height: 3.3mm;
        margin-right: 0.4mm;
    }
</style>

<div class="darkable phone-svg">
    <svg width="100%" height="100%" viewBox="0 0 23.947 23.99" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
         <path d="PATH" style="stroke-width:.264583;fill-opacity:1" transform="translate(-66.675 -125.148)"/>
     </svg>
</div>

Since CSS wasn't applying directly to the SVG, I decided to add it to the wrapping div instead. Hopefully, this solution can be helpful to others facing a similar issue!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using class binding for both ternary and non-ternary attributes

Suppose we have a tag that utilizes a ternary operator to apply alignment: <td :class="alignment ? ('u-' + alignment) : null" > This functions as intended since the pre-defined alignment classes are in place, now if we want to ...

Resizing an image that is being pulled from a database

I am currently working on a challenging database project that seems to have hit a minor cosmetic roadblock. The database I'm dealing with loads profiles into arrays for display using a PHP while loop, making it easy to display content and allow for a ...

Modifying the titles of posts with a tampermonkey script to change their background color in a vBulletin forum

I'm currently working on developing a Tampermonkey script to alter the theme of a website: which seems to be built on vBulletin. This is the script I have been experimenting with: // ==UserScript== // @name vBulletin Forum Dark Mode // @name ...

The localStorage attribute is incapable of storing the href property of an element

When using the localStorage property like localStorage.setItem('theme', element);, keep in mind that it does not store the href property of an element such as element.href = '../assets/css/syntax-highlighting/synthwave-84.css';: const l ...

Keep scrolling for scheduled chat availability that disables upon user engagement

Currently, I am working on developing a web Chat system that allows users to send messages to their friends. However, I am facing an issue with auto-scrolling new messages using jQuery. The pertinent files for this matter are: messages.php <div class ...

Variety of typefaces for diverse placeholder values

I have successfully changed the font-family of both input and textarea elements in HTML. However, my question is whether it's possible for two textarea fields to have different fonts applied to them individually. If so, I would appreciate some guidanc ...

Display the images adjacent to the usernames, followed by their respective levels underneath

<div class="players"> {{#each users}} {{#each usersInLobby}} <img src="/img/characters/{{skin}}.png" style="height: 85px; display:inline;"> <p>{{username}}{{level}}</p> {{/each}} {{/each}} ...

Switching Logo Image when Menu Button is Clicked

I'm looking to adjust the color of my logo when the menu button is clicked to match the overlay style. Currently, I managed to switch from a black logo to a white logo. However, when attempting to close the menu, it doesn't revert back to the bl ...

Is it possible for a div or any other element to apply "margin:auto" while allowing padding only for the text inside it, rather than specifying a fixed size or percentage?

When creating a new div and adding text to it, there are a few considerations. <div style="margin:auto;background-color:yellow;padding:10px;">text</div> Instead of the default 100% width, we can add padding around the text "text". To achieve ...

Android Studio encountered an error while trying to generate a new project

I am relatively new to android app development and have been using android studio for about a month now. Previously, I had no issues creating projects. However, recently, when trying to create a new project, I encountered the following error: Error:Unable ...

Error: Unable to locate reference to 'cv::findHomography'

I'm having trouble getting an OpenCV example to work on Android for finding objects in a scene. I used prebuilt static libraries from the OpenCV4Android SDK. Here's my Android.mk file: # Open CV libraries include $(CLEAR_VARS) LOCAL_MODULE : ...

Adjust the positioning of the background and create a smooth fade effect for

Is there a way to simultaneously change the background position and display an image in front of it? My current solution involves using a second div with padding to center it, but when I hover over the padding of the first div, the image does not change. ...

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

How can I eliminate the spacing in CSS?

Seeking assistance to eliminate the extra space above the navbar. Can someone guide me through this? Here is my HTML code for reference: And here is my CSS code: ...

When using AsyncTask.get(), a progress bar is not displayed

In my application, data is sent to the server without any issues as long as the user has a good signal. However, in areas with poor signals, the following code fails to send the data. String[] params = new String[]{compID, tagId, tagClientId, carerID, ...

How can I position a div column-10 to the right and make it stay fixed in place

I'm having an issue trying to position a div on the right side without causing content to overlap with the navbar. I've attempted using `position:absolute top:0 right:0`, but it's not working as intended. <link href="https:// ...

Center the text vertically within a div box

Within my div element labeled "product-name," I have set the height to 30px and the font-size to 11px. This div is intended to display the product name. However, when the product name is only one line long, it appears at the top of the container. I would l ...

Problem with the fixed header on a container causing a horizontal scroll bar

This scenario presents a bit of a challenge! I could solve it by adjusting the container's height, but that would disrupt the fixed position of the sticky header. My goal is to have a scrollbar visible in both the X and Y directions on the .scrollabl ...

Styling Challenge: Making the button inside a form match the design of the button outside the form

I have noticed that the button inside a form has a lot more padding around it compared to the one outside of the form. I am trying to adjust the within-form button so that it matches the padding of the without-form button. HTML/PHP <?php if (! ...

The carousel caption in Bootstrap 5 vanishes when viewing the website on a smaller device

Currently, I'm dealing with an issue using bootstrap carousel code. The carousel text displays properly on desktop screens but disappears when viewed on smaller sized screens. It appears that the text is being hidden behind the image. Various attempts ...