SVG Tutorial For Beginners - WordPress & Elementor
HTML-код
- Опубликовано: 26 авг 2024
- SVG Tutorial For Beginners - WordPress & Elementor.
A great starting point for those new to SVG Images and how to use them in WordPress and Elementor Page Builder. See how to easily leverage the scalable image format to create Hero Images, Page Headers, Special Effects, Website Logos and much more.
Learn how to use SVG images with the WordPress Media Manager and how to use them in conjunction with other effects in Elementor to get creative with your page designs.
This SVG Tutorial For Beginners will open your eyes to just a handful of the myriad of design possibilities.
Take your WordPress website and skills to the next level!
AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
- CartFlows Pro: bit.ly/2KuxhCm
- GeneratePress Premium: bit.ly/2Ydn1SE
- Crocoblock: bit.ly/2BD7e6E
- Pre Order Brizy Pro NOW: bit.ly/2Ji97r8
- OCEANWP: bit.ly/2fRHBr0
- ELEMENTOR PRO: jo.my/1s0t2s2
- WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
- DIVI 3 Page Builder: bit.ly/2HiiDcE
- DIVI Theme: bit.ly/2G8JMiA
- SMART SLIDER 3: bit.ly/2G0G1vB
- Astra Pro: bit.ly/2zruoKn
- CSSHERO: bit.ly/2qbrRl6
- SLIDER REVOLUTION 5 - bit.ly/2NYr8NV
- IMPREZA THEME: bit.ly/2mpK9wp
SUBSCRIBE
bit.ly/2rX7rhu
LETS CONNECT:
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
I kept bumping into SVG files lately but didn't understand what they were. What a revelation! Thanks for this video...just what I needed.
Great to see Affinity Designer getting a mention
I think the Affinity tools will be getting a little more love on the channel over the coming months. Really like what they are doing over there.
Great vid again. Just back from holiday with new and fresh inspiration. My partner asked me "how do you bring those inspiration to live?" No worries, I answered, Paul always provides workable tools and ideas in order to start. As ever you are such a great help. Thank you!
Welcome back Richard; I hope you had a great holiday. Go anywhere nice?
Glad you're still finding the content useful and things you can integrate into your own workflow. 😀
I've been avoiding SVGs so far but will give it a go now.
They're definitely worth checking out. In many cases, they can provide a lot of flexibility without crazy file sizes!
Very thorough and, more importantly, easy to follow. Thank you.
This is great! Right now I'm creating a logo design portfolio website, for sure ill use SVG !
Great video as always Paul, always wondered about SVG files
Same here. Never really looked into the benefits until recently. Kind of opened my eyes to some of the main benefits (and draw backs) of the format.
Thanks for the tutorials.
My pleasure Kareem.
Pretty cool effects! And very interesting content!
Great Video Again. :) Learn some new tricks here
Wow! Amazing tut.
Very helpful video
You are very Great sir
Hey brother, I don't think you need SafeSVG with Elementor, as Elementor handles the sanitization/compression, as well as media library compatibility.
The video was released just before Elementor included SVG support 😉
@@WPTuts my bad! I'll not doubt the master again :D
@@JamesJosephFinn I dunno about master... 🤣
Thanks for the tutorials. For the SVG logo with the complicated font, it would be interested to know what the size would be if we were to convert fonts to outlines from inside the vector software and then export instead of letting the SVG exporter create the outlines instead. Also, it would be interesting to know if exporting the logo with the complicated font from Illustrator instead of Affinity Designer would be any different as Illustrator has a minify functionality.
Yet another great tutorial Paul. At 21:06 you pointed out the impact on file size when you convert a complex font to curves, commenting that the increase in the case of the logo you were working with made it impractical.
You then went on to demo the deployment of that logo without converting the text to curves. Am I right in assuming that is something you would not do in practice (since few users would have that font installed)?
Yes, you're right. I wouldn't have used a complex font type logo converted to curves and output to SVG as it wouldn't have been practical.
In an instance like that I'd generally use a PNG format over SVG for ease and file size reduction.
However, I think the issue was because the font had a distressed look to it, therefore increasing the general file size.
Im having trouble uploading the SVG image into elementor. It's stuck, as if the size is too large. I tried SVG tiny 1.2, didn't help. Any tips on this?
amazing content! thank you a lot!
[help] thanks for tutorial , succesfully added svgs to website , but gtmetrix waterfall show high amount of blocking time for svg images
and gtmetrix show compressed size of image is way less than original svg . Can i do anything to reduce this bloacking time
awesome video! I would highly appreciate if you exlpain in another video svg paths for as design elements in the footer, header or as section deviders. A bit like the elementor shape deviders, but custom made.
Thank you a lot, I have a problem to upload the image to elementor, still waiting for the server CRM to fix it. I added a code to my wp_config.php documents, it works with two images, but it stopped in the evening, I tried with Safe SVG and SVG developer, both not working
Thanks for the great vid! For some time I'm trying to replace animated gif/video files by animated SVGs in my WordPress/Elementor website. My current workflow:
1.) I generate them with Adobe After Effects and export JSON files with the AE-plugin Bodymovin.
2.) Afterwards I import them with the WordPress plugin Bodymovin. This generates a shortcode that can be used in WordPress pages/posts.
3.) But my problem is, that my sliders only accept real photo or video files and do not provide any possibility to use shortcodes instead.
I would be infinitely grateful to find a solution for that!
Would there still be a security risk if I make my own SVG graphics in something like Adobe illustrator?
And thanks for the awesome videos you make! One of my favorite channels 😁
Hey Nikki, great question. Generally, the risk comes from downloading and using SVG images from unknown locations (online downloads, etc). If you're creating your own, then you shouldn't have any issues.
Thank you for the awesome feedback. ☺
@@WPTuts thanks so much! Looking forward to learning more 😁
Thanks for the walkthrough on SVG graphics within Elementor. I have a few sites that use the logo as svg, however, they don't show up in Firefox. Highly annoying. Would you know a fix for this?
Finding it hard to let go of Fireworks CS6 lol wish it had SVG support. It would be great if you did a video discussing your hardware setup and specs...was wondering what that light was on top of your monitor?
Wow, Fireworks. That's a bit of a blast from the past. :0)
I have been toying with the idea of a 'behind the scenes' type video that goes over what I use (equipment and software). At the moment, it's finding the time to fit it all in.
The light is a Benq Screenbar. Awesome little bit of kit that I didn't think I'd find very useful, but love it.
@@WPTuts if you have an affiliate link for the product I will buy it through your link :)
@@wgm247 not too sure if these are affiliate or just tracking links for the screenbar (it was supplied to me by BenQ).
Amazon UK: www.amazon.co.uk/dp/B0785D93KD
Amazon DE: www.amazon.de/dp/B0785D93KD
Hey, Paul! Does O'Neill pay you to wear their t-shirt on your video? I'm thinking that maybe 'cause they're twice the price of no-logo tees, that's how you make back part of your clothing budget! ;) Thanks for the good tutorial. Always interesting and informative!
Lmao! I wish they did sponsor me.. :0)
Thanks Paul, always very informative and excellent at presenting in an easy to take in the info delivery. Helpful as always!
Side note - what image resource site/ directory were you using for your vector towards the beginning of the video.
Thanks again!
Thank you 👍
I've got an Envato Elements subscription and tend to use that a lot these days. That's what was shown at the beginning of the video.
Great video, I learned a lot from you from many of your videos. I recently followed your smart slider 3 tutorial and implemented it on my website, do you think I need to use svg format file for the slider as well?
Thanks for that, but still have a further question. How to create the svg so I can change the color in elementor later on..for ex.. a logo in 1 color
Is there a free software to easily get rid of background colour? I have product images but they all have different background. I really need to unify background to just one white colour. Thanks Paul for your great tutorials!
Maybe take a look at something like Gimp. That should give you the tools you need. 👍
@@WPTuts yeah I went through Inkscape tuts a while ago and realised I'm not into deep design much, so kinda failed at POD but looked like a good one anyways. So understanding basics in Inkscape as regards to building a website would be great, something like Adam's for non techies. I guess Gimp is great but it's more like Photoshop, from my understanding it's not that good for vector, SVG.
@@WPTuts btw are you the guy who's doing tuts for OceanWP on their channel? I recognise your voice. Good job, mate😊
@@adeus6206 I have done a couple of guide videos for OceanWP for their RUclips channel. 😁
@@adeus6206 I'm looking at including a more rounded set of videos that include the graphic design element into the channel. So, maybe something like Inkscape for free vector editing could be a viable option in some future tutorials.
My feelings are that the majority of WordPress tutorials focus solely on the page building and not the actual design process. Therefore, for new web designers it only gives about 50% of the actual design process.
Not sure how that would be received, but I'll be adding that in to see how it goes in some of my longer form videos. 😁
I managed to upload an SVG without the plugin (I will end up using it though) and got a metadata string. Any ideas on how to save the SVG in Illustrator to avoid it (the metadata)? Thanks
Great video Paul! where did you get the border-image, where can I download it?
It was just a quick gradient image I put together with Photoshop.
I want to create a gallery for my site, basically its a remodeling company, I wanted to use a plugin that shows or something a customber can click thats hows before & after images, any recomendations on what plugin i should use
How do I create a svg text path in inkscape
photoshop has discontinued "export as SVG" as of Aug 2021. There is a way to switch to legacy export but too lengthy to explain here. I think Adobe wants folks to subscribe to the more expensive full Creative Cloud suite so you can do SVGs in their illustrator or XD software. Thats a rip.
You completely skipped uploading the SVG into WordPress? I'm still getting the error "SVG is not allowed for security purposes" even after downloaded the SVG SAFE plug in????
How can we do this using css hero rather than writing the css ourselves?
I miss Elementor, but too bad it’s not compatible for government use. It fails 508 compliance hard unless you have a dev team who can comprise custom code to work, including not being IE compatible (government still uses IE).
Will this work the same for animated svg?
Wow great what I have been looking for quick question what are you tuts on brizy I haven't seen any videos from you on that any money what do you think about it these fare in its life can one switch to it thank
If you have a nose on the channel you'll find about 6 - 8 videos on Brizy. Great plugin that has a lot to offer. Is it up there with Elementor Pro at the moment? No, but I think that given time it will mature into a great page builder.
If I’m creating the SVGs myself in Illustrator would they be safe to import?
Yes, absolutely. It's only files downloaded from unknown sources.
@@WPTuts That's great thanks!
@@martinsmall8221 no problem. 😁
I can't create a section within a section within a row
Hi and thanks for all the tutorials. Just found your channel today and have definitely subscribed.
I am looking to build an educational information website for a local adult education centre.
What would be my best choice for a theme and page builder for speed of uploading, ease of use and cost.
I don't mind paying for theme or page builder but don't want to pay over the odds.
Do you suggest paying an annual or lifetime versions of themes?
I have used Wordpress before but would be new to developing/designing a whole website.
Personally I like OceanWP and Elementor Pro. OWP has some great features straight out of the box and combining that with Elementor Pro should give you a great platform to build any type of site with. 😁
WPTuts thanks for the advice. Would you recommend going for the $39 or the €159 lifetime personal package? Also does annual mean pay every year or a one off?
@@garethjenkins4756 it would really depend on your needs. Lifetime means a one off fee and you'll have updates for the life of OWP. So, if your budget allows, that would be the safest bet.
If you get it today, they are doing 45% off, so it's a fair bit cheaper.
WPTuts thanks. And do you know how much it then cost to purchase elementor pro? And could you just get a way with the free version offered with Ocean WP? Do you have a direct link to the elementor pro purchase page? Or would I be better off purchasing via my Wordpress dashboard once I have uploaded The Ocean theme? I am looking to build an educational information site for a small local adult education centre.
WPTuts thanks. And do you know how much it then cost to purchase elementor pro? And could you just get a way with the free version offered with Ocean WP? Do you have a direct link to the elementor pro purchase page? Or would I be better off purchasing via my Wordpress dashboard once I have uploaded The Ocean theme? I am looking to build an educational information site for a small local adult education centre.
Wonderful content, but the music in the background is distracting.
Fair enough, I'll make sure it's lower in the mix next time :)
@@WPTuts Its better for tutorials not to have any music at all. Music is good for waiting in between or for something to finish if its used at all. just my opinion, keep up the great work. Always look forward to your uploads. ⮜iDATUS⮞
@@iDATUS I don't usually include it unless it's mainly talking head. Lesson learned and no music in the next one. 😉
Thanks for the tutorials. For the SVG logo with the complicated font, it would be interested to know what the size would be if we were to convert fonts to outlines from inside the vector software and then export instead of letting the SVG exporter create the outlines instead. Also, it would be interesting to know if exporting the logo with the complicated font from Illustrator instead of Affinity Designer would be any different as Illustrator has a minify functionality.
I would have if I hadn't stupidly deleted that logo.. Kinda annoying as it was an actual logo design I was going to implement... 🙄
@@WPTuts Oh no! Anyway, no worries, I did some tests with similar files and it seems that the export is considerably larger in general when a complicated font is used.
@@quantum_leap yeah, kind of reflects my tests too. As I mentioned in the video, SVG is a great option, but not always the right option.