image preview missing after update to WP 4.0

Hi bapdisaster,

Thank you for pointing this out, I had tested with 4.0 and all seemed fine, I skimmed over the fact that I wasn’t able to see them in the new media library.

I will work on a fix as soon as possible.

Cheers

Hello again,

I know! It’s been ages!!!

I actually sorted this issue out alone quite some time ago, but wanted to include some other features in the next update.
Today, I have finally released a new version that does address this issue.

I hope you’re still enjoying the plugin.

Hi Benbodhi,

sorry but I still see no preview images.

I updated my PHP to Version 5.5 and I still see a “broken-page-image” at the Media Library preview.
My WP Version is 4.2.4.

Do you have any idea why this error still occurs?
Or do I have to fix something in the CSS?
By the way the upload seems to be successful.

Hope you have any idea

Thanks in advance

Hello Rockblog,

Please deactivate all other plugins and use WordPress default theme, then test.
After you confirm that it is working, reactivate plugins/theme, one by one, testing in between.
Sounds to me like a plugin or theme conflict.
If you find out where the conflict is, please let me know so I can look into it.

Thanks
Ben

Hi Benbodhi,

I deactivated all other plug-ins so currently the svg-support is installed only. Furthermore I used the 2015 default theme.

I updated this Plug-in to Version 2.2, and it still shows me the known picture https://bounce-and-deliver.de/support_wp/Bild_Media_Support.png

I also tested different .svg files.

Any further idea?

Thanks in advance

That is really strange!
It certainly works on default installations.
Possibly something to do with the SVG files.
I would be happy to take a look if you can shoot me temporary admin access.
To send any login data, please use the form here: https://benbodhi.com/contact

Hi, I am having the same problem. Broken image in both the visual editor and preview.

My php version is 5.4.3, WP version 4.3

it may have something to do with my svg
I used Illustrator to create, and embedded the glyphs from the text (there are multiple tspans)

Here is the code for the svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="250px" height="133px" viewBox="0 0 250 133" xml:space="preserve" >
<font horiz-adv-x="1000">
<!-- HTF Gothama ? 2003 The Hoefler Type Foundry, Inc. Info: www.typography.com -->
<!-- Copyright: Copyright 2015 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="Gotham-Black" units-per-em="1000" underline-position="-133" underline-thickness="20"/>
<missing-glyph horiz-adv-x="500"/>
<glyph unicode="1" horiz-adv-x="422" d="M163,0l191,0l0,705l-141,0l-205,-58l37,-150l118,27z"/>
<glyph unicode="%" horiz-adv-x="899" d="M215,333C323,333 396,418 396,521l0,2C396,625 325,710 216,710C106,710 35,625 35,522l0,-2C35,417 107,333 215,333M112,0l135,0l540,700l-135,0M683,-10C791,-10 864,76 864,178l0,2C864,283 793,367 684,367C574,367 503,282 503,179l0,-2C503,75 575,-10 683,-10M216,443C183,443 157,476 157,521l0,2C157,567 180,600 215,600C249,600 274,566 274,522l0,-2C274,476 250,443 216,443M684,100C651,100 625,134 625,178l0,2C625,225 647,257 683,257C717,257 742,224 742,179l0,-2C742,133 718,100 684,100z"/>
<glyph unicode="7" horiz-adv-x="614" d="M62,0l214,0l309,554l0,146l-539,0l0,-163l324,0z"/>
<glyph unicode="6" horiz-adv-x="662" d="M341,-14C494,-14 619,81 619,238l0,2C619,380 511,458 388,458C319,458 274,432 237,404C246,492 287,553 369,553C425,553 465,532 508,500l91,137C532,687 464,714 366,714C147,714 41,548 41,330l0,-2C41,197 75,118 127,66C177,16 242,-14 341,-14M333,137C272,137 234,177 234,228l0,2C234,280 270,319 331,319C392,319 430,279 430,229l0,-2C430,176 394,137 333,137z"/>
<glyph unicode="0" horiz-adv-x="730" d="M364,-14C564,-14 689,152 689,350l0,2C689,550 565,714 366,714C167,714 41,548 41,350l0,-2C41,150 164,-14 364,-14M366,158C288,158 236,238 236,350l0,2C236,464 287,542 364,542C441,542 494,461 494,350l0,-2C494,237 444,158 366,158z"/>
</font>

	<font horiz-adv-x="1000">
<!-- HTF Gothama ? 2000 The Hoefler Type Foundry, Inc. Info: www.typography.com -->
<!-- Copyright: Copyright 2015 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="Gotham-Medium" units-per-em="1000" underline-position="-133" underline-thickness="20"/>
<missing-glyph horiz-adv-x="500"/>
<glyph unicode="M" horiz-adv-x="868" d="M90,0l121,0l0,500l219,-328l4,0l221,330l0,-502l123,0l0,700l-131,0l-213,-331l-213,331l-131,0z"/>
<glyph unicode="S" horiz-adv-x="640" d="M335,-10C482,-10 585,68 585,199l0,2C585,317 508,370 360,406C226,438 194,462 194,516l0,2C194,564 236,601 308,601C372,601 435,576 498,529l66,93C493,679 412,710 310,710C171,710 71,627 71,507l0,-2C71,376 155,332 304,296C434,266 462,239 462,189l0,-2C462,134 414,99 338,99C251,99 184,132 117,190l-74,-88C127,27 228,-10 335,-10z"/>
<glyph unicode="a" horiz-adv-x="587" d="M519,0l0,313C519,454 443,536 287,536C201,536 144,518 86,492l33,-97C167,415 211,428 270,428C354,428 400,388 400,315l0,-10C359,318 318,327 254,327C131,327 40,271 40,154l0,-2C40,46 128,-11 228,-11C308,-11 363,22 399,65l0,-65M402,191C402,125 342,80 262,80C205,80 160,108 160,158l0,2C160,211 205,242 281,242C328,242 371,233 402,221z"/>
<glyph unicode="b" horiz-adv-x="670" d="M376,-11C502,-11 622,88 622,263l0,2C622,440 501,539 376,539C291,539 236,495 197,440l0,290l-121,0l0,-730l121,0l0,82C234,33 289,-11 376,-11M348,94C266,94 194,161 194,263l0,2C194,366 266,434 348,434C430,434 499,367 499,265l0,-2C499,159 431,94 348,94z"/>
<glyph unicode="c" horiz-adv-x="571" d="M320,-12C423,-12 484,29 536,87l-73,72C425,120 383,93 326,93C233,93 168,169 168,263l0,2C168,357 232,433 320,433C381,433 420,406 457,367l75,81C483,502 421,539 321,539C163,539 47,413 47,263l0,-2C47,111 163,-12 320,-12z"/>
<glyph unicode="d" horiz-adv-x="670" d="M294,-11C380,-11 435,33 474,88l0,-88l121,0l0,730l-121,0l0,-284C436,495 381,539 294,539C168,539 49,440 49,265l0,-2C49,88 170,-11 294,-11M323,94C241,94 171,161 171,263l0,2C171,370 240,434 323,434C404,434 476,367 476,265l0,-2C476,162 404,94 323,94z"/>
<glyph unicode="e" horiz-adv-x="604" d="M318,-12C415,-12 484,27 534,87l-71,63C421,109 379,87 320,87C242,87 181,135 168,221l388,0C557,233 558,244 558,255C558,407 473,539 305,539C154,539 47,415 47,264l0,-2C47,99 165,-12 318,-12M167,301C178,383 230,440 304,440C384,440 430,379 438,301z"/>
<glyph unicode="f" horiz-adv-x="376" d="M103,0l121,0l0,424l138,0l0,100l-140,0l0,29C222,608 246,633 292,633C318,633 339,628 363,620l0,102C336,730 307,736 265,736C213,736 174,722 146,694C118,666 103,622 103,563l0,-38l-67,0l0,-101l67,0z"/>
<glyph unicode="g" horiz-adv-x="670" d="M311,-162C406,-162 480,-139 528,-91C572,-47 595,19 595,108l0,420l-121,0l0,-79C433,498 378,539 289,539C166,539 49,447 49,291l0,-2C49,134 165,42 289,42C376,42 431,82 475,139l0,-41C475,-8 416,-64 308,-64C236,-64 176,-43 120,-8l-45,-91C143,-140 224,-162 311,-162M321,144C238,144 171,203 171,290l0,2C171,379 237,437 321,437C405,437 476,378 476,291l0,-2C476,204 405,144 321,144z"/>
<glyph unicode="h" horiz-adv-x="620" d="M76,0l121,0l0,298C197,380 246,429 316,429C388,429 429,382 429,300l0,-300l121,0l0,336C550,459 481,539 362,539C280,539 231,496 197,446l0,284l-121,0z"/>
<glyph unicode="i" horiz-adv-x="286" d="M78,609l130,0l0,115l-130,0M83,0l121,0l0,528l-121,0z"/>
<glyph unicode="k" horiz-adv-x="582" d="M76,0l121,0l0,151l74,77l159,-228l140,0l-217,313l210,215l-147,0l-219,-234l0,436l-121,0z"/>
<glyph unicode="l" horiz-adv-x="286" d="M83,0l121,0l0,730l-121,0z"/>
<glyph unicode="m" horiz-adv-x="950" d="M76,0l121,0l0,297C197,379 243,429 310,429C377,429 417,383 417,301l0,-301l121,0l0,298C538,383 585,429 651,429C719,429 758,384 758,300l0,-300l121,0l0,337C879,466 809,539 694,539C614,539 558,502 515,446C487,502 434,539 358,539C277,539 231,495 197,448l0,80l-121,0z"/>
<glyph unicode="n" horiz-adv-x="620" d="M76,0l121,0l0,298C197,380 246,429 316,429C388,429 429,382 429,300l0,-300l121,0l0,336C550,459 481,539 362,539C280,539 231,496 197,446l0,82l-121,0z"/>
<glyph unicode="o" horiz-adv-x="657" d="M327,-12C490,-12 610,113 610,263l0,2C610,416 491,539 329,539C167,539 47,414 47,263l0,-2C47,111 166,-12 327,-12M329,93C235,93 168,171 168,263l0,2C168,357 230,433 327,433C422,433 489,356 489,263l0,-2C489,170 427,93 329,93z"/>
<glyph unicode="1" horiz-adv-x="396" d="M178,0l122,0l0,705l-86,0l-188,-60l26,-100l126,35z"/>
<glyph unicode="p" horiz-adv-x="670" d="M76,-160l121,0l0,242C234,33 289,-11 376,-11C502,-11 622,88 622,263l0,2C622,440 501,539 376,539C291,539 236,495 197,440l0,88l-121,0M348,94C266,94 194,161 194,263l0,2C194,366 266,434 348,434C430,434 499,367 499,265l0,-2C499,159 431,94 348,94z"/>
<glyph unicode="r" horiz-adv-x="413" d="M76,0l121,0l0,201C197,341 271,410 377,410l7,0l0,128C291,542 230,488 197,409l0,119l-121,0z"/>
<glyph unicode="s" horiz-adv-x="500" d="M257,-10C367,-10 453,45 453,156l0,2C453,253 366,288 289,312C227,332 170,348 170,386l0,2C170,419 197,441 244,441C288,441 342,422 393,391l48,86C385,514 313,537 247,537C142,537 59,476 59,376l0,-2C59,273 146,241 224,219C286,200 342,186 342,145l0,-2C342,108 312,86 260,86C206,86 144,108 87,151l-54,-82C99,17 182,-10 257,-10z"/>
<glyph unicode=" " horiz-adv-x="300"/>
<glyph unicode="t" horiz-adv-x="410" d="M253,-9C298,-9 332,1 362,18l0,99C338,105 314,99 287,99C246,99 222,118 222,165l0,259l142,0l0,104l-142,0l0,145l-121,0l0,-145l-67,0l0,-104l67,0l0,-278C101,30 164,-9 253,-9z"/>
<glyph unicode="2" horiz-adv-x="613" d="M49,0l506,0l0,108l-333,0l144,120C490,329 548,389 548,499l0,2C548,626 454,710 317,710C192,710 126,657 59,563l87,-68C200,565 244,600 308,600C372,600 421,560 421,491C421,428 386,383 290,302l-241,-205z"/>
<glyph unicode="u" horiz-adv-x="620" d="M258,-11C340,-11 389,32 423,82l0,-82l121,0l0,528l-121,0l0,-298C423,148 374,99 304,99C232,99 191,146 191,228l0,300l-121,0l0,-336C70,69 139,-11 258,-11z"/>
<glyph unicode="w" horiz-adv-x="861" d="M203,-4l108,0l119,361l118,-361l108,0l173,532l-121,0l-108,-362l-118,364l-103,0l-117,-364l-106,362l-124,0z"/>
<glyph unicode="y" horiz-adv-x="596" d="M184,-163C269,-163 316,-123 358,-15l210,543l-126,0l-137,-392l-150,392l-129,0l220,-528C226,-46 205,-61 171,-61C146,-61 122,-53 100,-41l-41,-90C96,-151 133,-163 184,-163z"/>
</font>

	<g>
	<path fill="#EF7622" d="M58.8,44.81c-3.29,9.54-12.35,16.39-23,16.39c-13.44,0-24.34-10.9-24.34-24.34
		c0-12.41,9.29-22.64,21.29-24.14V1.21C14.4,2.75,0,18.12,0,36.86c0,19.77,16.03,35.79,35.79,35.79c17.04,0,31.28-11.9,34.9-27.85
		H58.8z"/>
	<path fill="#EF7622" d="M143.35,59.44c-2.81,1.13-5.87,1.76-9.08,1.76c-13.44,0-24.34-10.9-24.34-24.34
		c0-13.32,10.7-24.13,23.96-24.33V1.08c-19.59,0.2-35.42,16.14-35.42,35.78c0,19.77,16.03,35.79,35.79,35.79
		c6.42,0,12.43-1.7,17.64-4.65L143.35,59.44z"/>
	<path fill="#EF7622" d="M235.37,58.67c-2.81,1.13-5.87,1.76-9.08,1.76c-13.44,0-24.34-10.9-24.34-24.34
		c0-13.32,10.69-24.13,23.96-24.33V0.3c-19.59,0.2-35.41,16.14-35.41,35.78c0,19.77,16.03,35.79,35.79,35.79
		c6.42,0,12.43-1.7,17.64-4.65L235.37,58.67z"/>
	<text class="percentage" transform="matrix(1 0 0 1 20.4937 41.6934)"><tspan x="0" y="0" font-family="'Gotham-Black'" font-size="17.1851">71%</tspan></text>
	<text class="percentage" transform="matrix(1 0 0 1 118.7749 41.6934)"><tspan x="0" y="0" font-family="'Gotham-Black'" font-size="17.1851">60%</tspan></text>
	<text class="percentage" transform="matrix(1 0 0 1 210.2861 40.9199)"><tspan x="0" y="0" font-family="'Gotham-Black'" font-size="17.1851">60%</tspan></text>
	<text transform="matrix(1 0 0 1 4.882812e-04 88.3164)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">of respondents </tspan></text>
	<text transform="matrix(1 0 0 1 4.882812e-04 99.0576)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">say that they </tspan></text>
	<text transform="matrix(1 0 0 1 4.882812e-04 109.7979)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">worry about </tspan></text>
	<text transform="matrix(1 0 0 1 4.882812e-04 120.5391)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">becoming unable </tspan></text>
	<text transform="matrix(1 0 0 1 4.882812e-04 131.2793)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">to work</tspan></text>
	<text transform="matrix(1 0 0 1 98.4712 88.3164)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">report they</tspan></text>
	<text transform="matrix(1 0 0 1 98.4712 99.0576)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">missed work</tspan></text>
	<text transform="matrix(1 0 0 1 98.4712 109.7979)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">in the last 12</tspan></text>
	<text transform="matrix(1 0 0 1 98.4712 120.5391)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">months due</tspan></text>
	<text transform="matrix(1 0 0 1 98.4712 131.2793)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">to MS</tspan></text>
	<text transform="matrix(1 0 0 1 195.3955 87.543)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">report they</text>
	<text transform="matrix(1 0 0 1 195.3955 98.2842)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">try to hide</tspan></text>
	<text transform="matrix(1 0 0 1 195.3955 109.0244)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">their MS </tspan></text>
	<text transform="matrix(1 0 0 1 195.3955 119.7656)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">symptoms</tspan></text>

	<text transform="matrix(1 0 0 1 195.3955 130.5059)"><tspan x="0" y="0" font-family="'Gotham-Medium'" font-size="8.5926">at work</tspan></text>
	<line fill="none" stroke="#000000" stroke-width="1.0741" x1="34.78" y1="78.21" x2="34.78" y2="67.48"/>
	<line fill="none" stroke="#000000" stroke-width="1.0741" x1="130.97" y1="78.21" x2="130.97" y2="67.48"/>
	<line fill="none" stroke="#000000" stroke-width="1.0741" x1="226.09" y1="77.43" x2="226.09" y2="67.48"/>
</g>
</svg>

This post is marked ‘resolved’ but I don’t see the resolution anywhere.

Hope this plugin can work for me. Another question, will I be able to use css transitions on classes within the svg file?

Hello gledger,

Sorry to see you are having this issue as well ??
FYI, that version of PHP is at end of life, with security updates only for the next 2 weeks. I’m not sure that would have anything to do with the issue, but I don’t use PHP that old to test.

I have tested this SVG you have provided and there is something wrong with it, although I’m not sure what, but when I run it through SVG Cleaner (free download), it says “Invalid SVG File” and additionally, I too get the no preview thumbnail.

It sounds like something wrong with the SVG files, which is why this topic is resolved.

I have created a quick messy SVG file with Illustrator for you to test: Download Here.
I also Uploaded a screenshot of the Illustrator settings when saving as SVG: Download Here.

I didn’t run this through SVG Cleaner, but you could if you wanted.

Let me know how you go with that SVG I have provided (it is currently uploaded to one of my WordPress installations and working fine).

Also, once you have a working SVG, yes, you can target any element within the SVG using CSS – this is the main feature of my plugin (transitions will depend on CSS and browser limitations, but you can certainly use them).