Recent
Categories
View Replies (11)

Adding Dimensions to an SVG

  1. Issue
0
Votes
Undo
  1. davec62
    davec62
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 16 September 2022
  5.  Subscribe via email
Hi

I am using an SVG for my logo on a development site J4 Layla Template. If I load an image file png/jpg etc the dimensions are also included. If however I load an SVG they are missing.


<img class="logo-image primary-logo-image" src="/2022/images/svg/logo-resized.svg" alt="Logo">






<img class="logo-image primary-logo-image" src="/2022/images/logo.png" alt="Logo" width="200" height="89">


I can add the width and height manually to the logo.php file in the layout folder but that obviously is not ideal.



<img class="logo-image primary-logo-image" src="/<?php echo Uri::root(true); ?>/<?php echo $logoimagefile; ?>" alt="Logo" width="200" height="89"/>


Is there a way as with standard image files that this can be implemented without making changes to the above file. I know I can use CSS



.logo-image {

    width: 180px;

}


Thanks

David
Responses (11)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi David

It is a very new feature with limited documentation. You also bring up a valid point that maybe we should include the inc folder with child templates. It is something we will certainly look in :).

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
davec62
davec62
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

thanks for the reply. It seems I have possibly misunderstood the function of the child templates. A reread of the info may be a good idea. :)

David
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi David

I believe this is due to creating a child template using the inc folder. By default, the child template should only contain the js, css, images and fonts folder. To include the inc folder, you would likely need to update the template xml prior to installing the template?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
davec62
davec62
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

The dimension do show f I add them to the default template. It is also worth noting that if I set the child as default and leave the dimensions in the parent template the dimensions show.

Thanks

David
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi David

If you add the width and height attributes to the original template, are these attributes applied?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
davec62
davec62
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

thanks for the answer. I realise I can do this with CSS. I would also like to hard code the size, as I noted if I load a png file the dimensions are added. I created a child template and added logo.php to the folders inc/layouts and added the dimensions.



<img class="logo-image primary-logo-image" src="/<?php echo Uri::root(true); ?>/<?php echo $logoimagefile; ?>" alt="Logo" width="180" height="76" />


The dimensions are still not showing. Not sure if there is something I am missing when creating the child template.

Thanks

David
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you David

So currently it looks like your logo size is been defined by the width and height attributes within the SVG tag of your SVG file (https://cremins.co.uk/2022/images/svg/logo-resized.svg). My personal preference is to not set these attributes and instead set a max width with some CSS.

Eg.

.logo .logo-image {

    max-width: 240px;

}


This gives a responsive option where the logo will resize if space is not available.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
davec62
davec62
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I have resolved the issue of the duplicate child template, I deleted it from the database and the site admin now shows as I would expect. ;)

David
  1. more than a month ago
  2. Commercial Templates
  3. # 8
davec62
davec62
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

further to the point raised. I created a child templates and then placed the logo.php file in the appropriate folder. Please see screenshot. I added the dimensions but they are not showing in the source code below..



<img class="logo-image primary-logo-image" src="/2022/images/svg/logo-resized.svg" alt="Logo">


Can you conform I have set the child template up correctly please? I also note that I have a copy of the child template in styles which is not something I was expecting!

Thanks

David
Attachments (2)
screenshot-2022.09.21-11_02_07.png screenshot-2022.09.21-11_02_07.png
screenshot-2022.09.21-11_06_40.png screenshot-2022.09.21-11_06_40.png
  1. more than a month ago
  2. Commercial Templates
  3. # 9
davec62
davec62
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

I have sent an email with the link to the page and a reference to this post

Thanks

David
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Daniel

Would you have a URL to an example of your site with your SVG logo?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok