The Form Display formatter only lets you set a max-width and max-height (defaults to 300), however if you upload an SVG that doesn't have a width and height parameter (eg a responsive SVG), then the upload preview is invisible because the <img> tag doesn't know how to calculate the width of an SVG that doesn't have a specific width set, and the "max-width: 100%" provided by Drupal's styles out of the box, is overridden by the inline style: "max-width: 300px" from the SVG form display config.

To fix this, we must add either a width or height attribute to the image tag.

Comments

jwilson3 created an issue. See original summary.

jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

Issue summary: View changes
jwilson3’s picture

The following patch adds a width attribute if it exists in the form display configuration, and if not, adds a height attribute.

ruslan piskarov’s picture

Status: Active » Reviewed & tested by the community

Thank you @jwilson3. Looks good for me.

amateescu’s picture

StatusFileSize
new778 bytes

Another approach is to add a width: 100%; before the max-width style, and the end result will be the same :)

Note that this patch was created for the 2.0.x branch, but it should apply to 8.x-1.x too.

  • mandclu committed c1cc916 on 2.0.x authored by amateescu
    Issue #3053018 by jwilson3, amateescu: Fix previews of SVGs that have no...
mandclu’s picture

Status: Reviewed & tested by the community » Fixed

The patch from #6 didn't appear to change the preview image size in my testing, but the patch from #4 did, so committing that.

That said, it worked well when adding an SVG image directly to the media library, but didn't make the image sized as expected when adding the SVG through the media library. I'll open a new issue for this other issue.

paintingguy’s picture

using 2.1 in my big D9 site has created the inability to update.php after I upgrade. I want to uninstall it now but cannot without destroying my site, needing to be restored.
Rather than trying to find out why its breaking my site (as I've never ever used SVG inages in the first place), I wish to uninstall it but can't as it won't allow this to happen either.
Can the developer please help guide me on how to remove it?

Thank you

mandclu’s picture

@paintingguy sorry to hear that you've run into problems after installing the latest version. Please open a new issue, and include as much detail as possible, including:
- any errors logged, either in the db log or in your PHP logs
- the method used to install the module (Composer or any other)
- what methods you've used to run the updates (e.g. drush, web UI, etc)

paintingguy’s picture

Trying to uninstall 2.1 give me this in /admin/config:

The website encountered an unexpected error. Please try again later.

Drupal\Core\Field\FieldException: Attempt to create a field field_media_svg that does not exist on entity type media. in Drupal\field\Entity\FieldConfig->getFieldStorageDefinition() (line 315 of core/modules/field/src/Entity/FieldConfig.php).

Drupal\Core\Field\FieldConfigBase->getSettings() (Line: 517)
Drupal\Core\Field\FieldConfigBase->getItemDefinition() (Line: 138)
media_requirements('runtime')
call_user_func_array('media_requirements', Array) (Line: 403)
Drupal\Core\Extension\ModuleHandler->invokeAll('requirements', Array) (Line: 109)
Drupal\system\SystemManager->listRequirements() (Line: 93)
Drupal\system\SystemManager->checkRequirements() (Line: 121)
Drupal\system\Controller\SystemController->overview('system.admin_config')
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 578)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 158)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 80)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 50)
Drupal\ban\BanMiddleware->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 717)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

paintingguy’s picture

This is what I get in /admin/config after uninstall of 2.0: with latest drupal 9:

The website encountered an unexpected error. Please try again later.
Error: Call to a member function getLabel() on null in Drupal\layout_builder\Plugin\Derivative\FieldBlockDeriver->getDerivativeDefinitions() (line 113 of core/modules/layout_builder/src/Plugin/Derivative/FieldBlockDeriver.php).

Drupal\layout_builder\Plugin\Derivative\FieldBlockDeriver->getDerivativeDefinitions(Array) (Line: 101)
Drupal\Component\Plugin\Discovery\DerivativeDiscoveryDecorator->getDerivatives(Array) (Line: 87)
Drupal\Component\Plugin\Discovery\DerivativeDiscoveryDecorator->getDefinitions() (Line: 284)
Drupal\Core\Plugin\DefaultPluginManager->findDefinitions() (Line: 175)
Drupal\Core\Plugin\DefaultPluginManager->getDefinitions() (Line: 22)
Drupal\Core\Plugin\DefaultPluginManager->getDefinition('local_tasks_block') (Line: 16)
Drupal\Core\Plugin\Factory\ContainerFactory->createInstance('local_tasks_block', Array) (Line: 76)
Drupal\Component\Plugin\PluginManagerBase->createInstance('local_tasks_block', Array) (Line: 62)
Drupal\Core\Plugin\DefaultSingleLazyPluginCollection->initializePlugin('local_tasks_block') (Line: 57)
Drupal\block\BlockPluginCollection->initializePlugin('local_tasks_block') (Line: 80)
Drupal\Component\Plugin\LazyPluginCollection->get('local_tasks_block') (Line: 45)
Drupal\block\BlockPluginCollection->get('local_tasks_block') (Line: 83)
Drupal\Core\Plugin\DefaultSingleLazyPluginCollection->setConfiguration(Array) (Line: 99)
Drupal\Core\Plugin\DefaultSingleLazyPluginCollection->addInstanceId('local_tasks_block', Array) (Line: 55)
Drupal\Core\Plugin\DefaultSingleLazyPluginCollection->__construct(Object, 'local_tasks_block', Array) (Line: 34)
Drupal\block\BlockPluginCollection->__construct(Object, 'local_tasks_block', Array, 'seven_secondary_local_tasks') (Line: 156)
Drupal\block\Entity\Block->getPluginCollection() (Line: 145)
Drupal\block\Entity\Block->getPlugin() (Line: 118)
Drupal\block\BlockAccessControlHandler->checkAccess(Object, 'view', Object) (Line: 105)
Drupal\Core\Entity\EntityAccessControlHandler->access(Object, 'view', Object, 1) (Line: 314)
Drupal\Core\Entity\EntityBase->access('view', NULL, 1) (Line: 56)
Drupal\block\BlockRepository->getVisibleBlocksPerRegion(Array) (Line: 137)
Drupal\block\Plugin\DisplayVariant\BlockPageVariant->build() (Line: 274)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 132)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 142)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.view') (Line: 163)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 80)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 50)
Drupal\ban\BanMiddleware->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 717)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

paintingguy’s picture

In reports is says this:

SVG image field
SVG Image Field has unmet Composer dependencies. Read the documentation on how to install them.

However, I have tried to update via composer and I am unable to use composer to update. I am forced to update via browser. but it breaks by site.

Hope this all helps.

mandclu’s picture

We really should be having this discussion in a separate issue, as each post sends out notifications to everyone who commented on the original issue, which seems to be unrelated.

I tried installing SVG Image Field on a clean install of Drupal 9.2.4 running on PHP 7.4.16, and had no issues installing or uninstalling the module. Can you provide steps to reproduce your problem?

paintingguy’s picture

Not sure what more to say other than I wish I could wipe SVG from my system.

Sorry for posting this in the wrong area. Hopefully someone has an answer.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Haessler’s picture

Same problem here as with Paintingguy: Unable to update, can't uninstall SVG Image Field, SVG Image Field has unmet Composer dependencies. Read the documentation on how to install them. Can't use composer.

jwilson3’s picture

Please file a separate support issue.

mandclu’s picture

I created #3243649: Fail gracefully if composer dependencies unmet to capture this new issue that appears to be composer-related. Please add any related comments or additional detail there.

As an FYI for anyone who wants support, commenting on a closed issue makes it harder for a maintainer to find the issue that has your comment.