iconv error: invalid charset on data-uri encoded SVG elements in CSS

[codeyash]

I need to remove these from bootstrap 4 in order to remove iconv(): Wrong charset, conversion from UTF8,%3CSVG' to UTF-8//TRANSLIT' is not allowed

In short remove below two items:

1. TH text align 2. SVG images. Anywhere in BS4 or normal HTML

Complete Changes in BS4

 th {
-  text-align: inherit;
+  /*text-align: inherit;*/
 }
 
 label {
@@ -3684,7 +3684,7 @@ tbody.collapse.show {
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
+
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
@@ -3692,7 +3692,7 @@ tbody.collapse.show {
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E");
+
 }
 
 .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -3712,7 +3712,7 @@ tbody.collapse.show {
 }
 
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
+
 }
 
 .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -3727,7 +3727,7 @@ tbody.collapse.show {
   line-height: 1.5;
   color: #495057;
   vertical-align: middle;
-  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
+
   background-size: 8px 10px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
@@ -4362,7 +4362,7 @@ tbody.collapse.show {
 }
 
 .navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+
 }
 
 .navbar-light .navbar-text {
@@ -4410,7 +4410,7 @@ tbody.collapse.show {
 }
 
 .navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+
 }
 
 .navbar-dark .navbar-text {
@@ -5135,7 +5135,7 @@ tbody.collapse.show {
 }
 
 .progress-bar-striped {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+
   background-size: 1rem 1rem;
 }
 
@@ -5976,11 +5976,9 @@ button.close {
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 }
 
 .carousel-indicators {

[codeyash]

ENV

DOCUMENT_ROOT	"private"
REMOTE_ADDR	"127.0.0.1"
REMOTE_PORT	"54166"
SERVER_SOFTWARE	"PHP 7.2.3-1+ubuntu16.04.1+deb.sury.org+1 Development Server"
SERVER_PROTOCOL	"HTTP/1.1"
SERVER_NAME	"localhost"
SERVER_PORT	"8001"
REQUEST_URI	"/download-pdf"
REQUEST_METHOD	"POST"
SCRIPT_NAME	"/index.php"
SCRIPT_FILENAME	"/index.php"
PATH_INFO	"/download-pdf"
PHP_SELF	"/index.php/download-pdf"
HTTP_HOST	"localhost:8001"
HTTP_CONNECTION	"keep-alive"
CONTENT_LENGTH	"14131"
HTTP_CONTENT_LENGTH	"14131"
HTTP_CACHE_CONTROL	"max-age=0"
HTTP_ORIGIN	"http://localhost:8001"
HTTP_UPGRADE_INSECURE_REQUESTS	"1"
CONTENT_TYPE	"application/x-www-form-urlencoded"
HTTP_CONTENT_TYPE	"application/x-www-form-urlencoded"
HTTP_USER_AGENT	"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36"
HTTP_ACCEPT	"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8"
HTTP_DNT	"1"
HTTP_REFERER	"http://localhost:8001/"
HTTP_ACCEPT_ENCODING	"gzip, deflate, br"
HTTP_ACCEPT_LANGUAGE	"en-GB,en-US;q=0.9,en;q=0.8"
HTTP_COOKIE	"XSRF-
REQUEST_TIME_FLOAT	1521632902.0415
REQUEST_TIME	1521632902
APP_NAME	"Laravel"
APP_ENV	"local"
APP_KEY
APP_DEBUG	"true"
APP_URL	"http://localhost"
LOG_CHANNEL	"stack"
DB_CONNECTION	"mysql"
DB_HOST	"127.0.0.1"
DB_PORT	"3306"
DB_DATABASE	"homestead"
DB_USERNAME	"homestead"
DB_PASSWORD	""
BROADCAST_DRIVER	"log"
CACHE_DRIVER	"file"
SESSION_DRIVER	"file"
SESSION_LIFETIME	"120"
QUEUE_DRIVER	"sync"
REDIS_HOST	"127.0.0.1"
REDIS_PASSWORD	"null"
REDIS_PORT	"6379"
MAIL_DRIVER	"smtp"
MAIL_HOST	"smtp.mailtrap.io"
MAIL_PORT	"2525"
MAIL_USERNAME	"null"
MAIL_PASSWORD	"null"
MAIL_ENCRYPTION	"null"
PUSHER_APP_ID	""
PUSHER_APP_KEY	""
PUSHER_APP_SECRET	""
PUSHER_APP_CLUSTER	"mt1"
MIX_PUSHER_APP_KEY	""
MIX_PUSHER_APP_CLUSTER	"mt1"

[codeyash]

Code location where error comes

[codeyash]

Use any html code + BS4 css to generate error

If possible please fix.

[finwe]

First of all, SVG background images are not supported. They should however not cause errors.

I see the general reason for the mentioned error but I am not able to reproduce it (with any html code + BS4 css). Please, provide a small sample showing this error in a form of a unit test (See https://github.com/mpdf/mpdf/tree/development/tests/Issues).

[LukeUsher]

Just a quick update with this, since I ran into it with mpdf 8.1.2:

Within Mpdf::ReadCharset(), there is a regex which attempts to parse the HTML document for a "charset=" label, in order to determine the encoding of the input document

		// Charset conversion
		if ($this->allow_charset_conversion) {
			if (preg_match('/<head.*charset=([^\'\"\s]*).*<\/head>/si', $html, $m)) {
				if (strtoupper($m[1]) != 'UTF-8') {
					$this->charset_in = strtoupper($m[1]);
				}
			}
		}

In most cases, this works fine, but when using bootstrap4, it erronously returns the charset of embedded svg images as the document charset

The offending charset in the document is

url("data:image/svg+xml;charset=utf8,%3Csvg 

causing mPDF to call iconv with invalid inputs. UTF8,%3CSVG is not a valid encoding type.

One solution could be to stop searching when it hits a , character, since that is not valid within charset definitions, making it return "UTF8"

Alternatively, mPDF could be smarter and know not to check for charset= within embedded images.

A perhaps even better alternative would be to compare against a list of supported encoding types for iconv, to avoid the possibility of passing invalid inputs entirely.