Categories
✍️ Start Publishing
✍️ Start Publishing

How to Use SVG Files: A Practical Beginner's Guide

Banner

Boost your website authority with DA40+ backlinks and start ranking higher on Google today.

SVG is a compact, XML-based vector graphic format that scales without quality loss. This guide explains how to use SVG files for web and design projects, comparing inline SVG, image tags, and background images, while covering optimization, accessibility, and common pitfalls.

Quick summary
  • Primary use cases: scalable icons, illustrations, animations, and charts.
  • Embedding options: inline SVG (DOM access), (cache-friendly), background-image (CSS-only).
  • Optimize with viewBox, remove metadata, minify XML, and compress output.
  • Accessibility: include and <desc> or aria labels.</li> </ul> <div style='font-size:12px;color:#555;margin-top:8px'><strong>Detected intent:</strong> Informational</div> </div> <h2>How to Use SVG Files: Basics and workflow</h2> <p>Begin by understanding the core elements of how to use SVG files: an SVG file is text (XML) describing shapes such as <path>, <rect>, <circle>, and grouping elements like <g>. Key attributes include viewBox (controls coordinate system), width/height (presentation), fill and stroke (appearance), and preserveAspectRatio (scaling behavior). Because SVG is text-based, it is both human-readable and editable with code or a vector editor.</p> <h3>When to choose SVG over raster (PNG/JPEG)</h3> <ul> <li>Icons, logos, and UI elements that must remain crisp at any size.</li> <li>Illustrations that require animation or DOM interaction (CSS/JS).</li> <li>Charts and diagrams where small file size and scalability matter.</li> </ul> <h2>Embedding methods and trade-offs</h2> <p>Three common ways to include SVG in a web page produce different trade-offs in control, performance, and caching:</p> <h3>Inline SVG (<svg> in HTML)</h3> <p>Pros: full DOM access, CSS styling and JS manipulation, accessible elements. Cons: larger HTML payload and less cache reuse for repeated icons.</p> <h3><img src='...svg'> and <picture></h3> <p>Pros: cached as a separate resource, easy fallback with <picture>. Cons: limited ability to style inner shapes; requires external file edits for changes.</p> <h3>CSS background-image or object/embed</h3> <p>Pros: good for decorative icons and backgrounds. Cons: less semantic and harder to make accessible; no direct DOM control.</p> <h2>SVG optimization techniques and performance</h2> <p>Optimized SVGs load faster and use less bandwidth. Key SVG optimization techniques include removing unnecessary metadata, collapsing redundant groups, simplifying path data, and minifying XML. Tools and automated build steps can handle these cleanups during production builds. After optimization, compress SVG output with GZIP or Brotli for delivery over HTTP.</p> <h3>Practical optimization checklist</h3> <p>Use the 'SVG READY checklist' before deploying SVGs:</p> <ul> <li>Remove editor metadata and comments.</li> <li>Ensure viewBox is set and consistent with width/height.</li> <li>Combine shapes where possible and simplify path commands.</li> <li>Use currentColor for icon fills to inherit text color when appropriate.</li> <li>Minify XML and compress over HTTP (GZIP/Brotli).</li> </ul> <h2>SVG accessibility best practices</h2> <p>Accessible SVGs provide text alternatives and ARIA attributes. For content that conveys meaning, include <title> and <desc> elements inside the SVG and ensure they are referenced with role='img' and aria-labelledby when needed. For purely decorative SVGs, use aria-hidden='true' or role='presentation' to prevent screen readers from announcing them.</p> <h3>Quick accessibility rules</h3> <ul> <li>If the image conveys information, include a descriptive text alternative.</li> <li>Use <title> and <desc> for inline SVGs; use alt text when using <img> to reference an external SVG file.</li> <li>Avoid relying solely on color; use text or shapes to convey meaning.</li> </ul> <h2>Security considerations and scriptable SVGs</h2> <p>SVG's XML nature allows script execution when embedded inline or when loaded through object/embed in some contexts. Treat user-provided SVGs as untrusted input: strip scripts, external references, and on-event attributes before inserting them into the DOM. Server-side sanitization or using a safe rendering pipeline avoids XSS risks.</p> <h2>Tools, file flow, and a small real-world example</h2> <p>Designers may export from vector editors (Inkscape, Figma, Adobe Illustrator) and developers should run SVGs through a minifier and an automated optimizer in the build pipeline. For example, a marketing team created a responsive hero illustration as SVG, set viewBox='0 0 1200 600', used media queries to swap simplified SVGs at small breakpoints, and served compressed files to reduce load time. This approach preserved sharpness on high-DPI displays while keeping performance acceptable.</p> <h2>Common mistakes and trade-offs</h2> <h3>Common mistakes</h3> <ul> <li>Embedding large, complex SVGs inline on every page, which increases HTML size and slows initial rendering.</li> <li>Not setting viewBox, causing unpredictable scaling.</li> <li>Neglecting accessibility elements or overusing aria-hidden for meaningful images.</li> <li>Failing to sanitize third-party SVGs, opening security vulnerabilities.</li> </ul> <h3>Trade-offs to consider</h3> <p>Inline SVGs provide manipulation power but hurt cache efficiency for repeated icons. External files cache well but limit per-instance styling. Highly optimized SVGs reduce bytes but can remove helpful metadata for designers—keep a source repository with editable originals.</p> <h2>Practical tips for beginners</h2> <ul> <li>Start with simple shapes; inspect the SVG text to learn how paths and attributes map to visuals.</li> <li>Prefer external SVG files for repeatable icons; use inline SVG for interactive, script-driven graphics.</li> <li>Always include viewBox and remove unnecessary width/height unless fixed sizing is required.</li> <li>Use server compression and an optimizer (build step) to keep file sizes small.</li> <li>Sanitize any SVG uploaded by users before embedding in pages.</li> </ul> <h2>Core cluster questions</h2> <ul> <li>How to convert SVG to other formats without losing quality?</li> <li>When should icons be inline SVG vs external files?</li> <li>What are best practices for SVG accessibility?</li> <li>How to optimize complex SVG illustrations for the web?</li> <li>How to safely allow user-uploaded SVGs?</li> </ul> <h2>References and further reading</h2> <p>For technical details and element references, consult the authoritative MDN documentation on SVG: <a href='https://developer.mozilla.org/en-US/docs/Web/SVG' rel='nofollow' target='_blank'>MDN SVG docs</a>.</p> <h2>FAQ</h2> <h3>How to use SVG files in web pages?</h3> <p>Embed SVGs as inline code (<svg>), reference them with <img src='...svg'> for caching benefits, or use background images in CSS for decorative purposes. Choose the method that balances styling/control and performance. Ensure viewBox is set and optimize the file before deployment.</p> <h3>Can SVG files be animated?</h3> <p>Yes. SVGs support CSS animations, SMIL animation (limited browser support), and JavaScript-based animations. For interactive or complex motion, use CSS or JS to animate attributes or transform properties on shape elements.</p> <h3>Are SVG files good for logos and icons?</h3> <p>SVG is ideal for logos and icons due to lossless scaling, small file sizes for simple graphics, and support for styling via CSS. Use currentColor for icon fills when wanting icons to inherit text color.</p> <h3>How to optimize SVG files for faster loading?</h3> <p>Remove metadata and comments, simplify paths and groups, minify XML, and enable server compression. Integrate an SVG optimizer into the build process to automate these steps.</p> <h3>How to ensure SVG accessibility?</h3> <p>Provide meaningful text alternatives: for inline SVGs include <title> and <desc> and associate them with aria-labelledby; for img-referenced SVGs use the alt attribute. Mark purely decorative SVGs with aria-hidden='true'.</p> </div> <hr> <div class="related-post"> <div class="section-title text-start mb--20"> <h3 class="title">Related Posts</h3> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/web-development-company-india-codechaintech"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/69be373e9f0f45866_1774073662.jpg" alt="Web Development Company in India | CodeChainTech" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/web-development-company-india-codechaintech"> Web Development Company in India | CodeChainTech </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 5 hours ago </li> </ul> </div> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/clicks-conversions-web-development-digital-experiences"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/69bd8dac2b0b49344_1774030252.jpeg" alt="From Clicks to Conversions: How Modern Web Development Companies Build High-Impact Digital Experienc" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/clicks-conversions-web-development-digital-experiences"> From Clicks to Conversions: How Modern Web Development Companies Build High-Impact Digital Experienc </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 10 hours ago </li> </ul> </div> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/thoughtful-ux-design-digital-success"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/69bd801156d363085_1774026769.png" alt="Why Thoughtful UX Design Is the Foundation of Digital Success" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/thoughtful-ux-design-digital-success"> Why Thoughtful UX Design Is the Foundation of Digital Success </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 18 hours ago </li> </ul> </div> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/ai-web-development-smart-scalable-websites"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/69b8f9e02c7424449_1773730272.jpeg" alt="AI in Web Development for Smart Scalable Websites" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/ai-web-development-smart-scalable-websites"> AI in Web Development for Smart Scalable Websites </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 4 days ago </li> </ul> </div> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/font-size-calculator-responsive-accessible-typography-zefld"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/240_69b66f367ce3c.jpg" alt="Font Size Calculator Guide for Responsive, Accessible Typography" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/font-size-calculator-responsive-accessible-typography-zefld"> Font Size Calculator Guide for Responsive, Accessible Typography </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 6 days ago </li> </ul> </div> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/image-compressor-website-speed-guide"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/586_69b35bb666c27.jpg" alt="Practical Guide to Choosing an Image Compressor for Website Speed" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/image-compressor-website-speed-guide"> Practical Guide to Choosing an Image Compressor for Website Speed </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 8 days ago </li> </ul> </div> </div> <div class="rbt-card card-list variation-02 rbt-hover mt--30"> <div class="rbt-card-img"> <a href="https://indibloghub.com/post/ai-font-pairer-website-typography"> <img loading="lazy" decoding="async" src="https://indibloghub.com/public/images/courses/765_69b2a4e61c612.jpg" alt="How to Use an AI Font Pairer for Website Typography — Practical Guide" width="290" height="150"> </a> </div> <div class="rbt-card-body"> <h2 class="rbt-card-title line-clamp-2"> <a href="https://indibloghub.com/post/ai-font-pairer-website-typography"> How to Use an AI Font Pairer for Website Typography — Practical Guide </a> </h2> <ul class="rbt-meta mt--0"> <li> <i class="feather-clock"></i> 9 days ago </li> </ul> </div> </div> <div class="col-lg-12 mt--30 mb--30 text-center"> <a class="rbt-btn btn-gradient icon-hover radius-round btn-md" href="https://indibloghub.com/topics/web-development-services"> <span class="btn-text">Load more...</span> <span class="btn-icon"><i class="feather-arrow-right"></i></span> </a> </div> </div> <hr class="mt--30"> <div class="post-disclaimer-note"> <strong>Note:</strong> IndiBlogHub is a creator-powered publishing platform. All content is submitted by independent authors and reflects their personal views and expertise. IndiBlogHub does not claim ownership or endorsement of individual posts. Please review our <a href="https://indibloghub.com/disclaimer" target="_blank">Disclaimer</a> and <a href="https://indibloghub.com/privacy-policy" target="_blank">Privacy Policy</a> for more information. </div> </div> </div> </div> </div> </div> <section class="cta-pro py-5 mt--30"> <div class="container"> <div class="cta-box text-center mx-auto"> <div class="cta-badge">Free to publish</div> <h2 class="cta-title"> Your content deserves <span>DR 60+ authority</span> </h2> <p class="cta-desc"> Join <b class="text-primary">25,000+ publishers</b> who've made IndiBlogHub their permanent publishing address. Get your first article indexed within 48 hours — guaranteed. </p> <div class="row cta-stats text-center"> <div class="col-6 col-md-3"> <div class="stat-value">DA 55+</div> <div class="stat-label">Domain Authority</div> </div> <div class="col-6 col-md-3"> <div class="stat-value">48hr</div> <div class="stat-label">Google Indexing</div> </div> <div class="col-6 col-md-3"> <div class="stat-value">100K+</div> <div class="stat-label">Indexed Articles</div> </div> <div class="col-6 col-md-3"> <div class="stat-value">Free</div> <div class="stat-label">To Start</div> </div> </div> <div class="cta-actions"> <a href="https://indibloghub.com/user/register" class="btn btn-primary btn-lg"> ✍️ Start Publishing Free </a> </div> </div> </div> </section> <style> .cta-pro { background: #f6f8fb; } .cta-box { max-width: 900px; background: #ffffff; border-radius: 16px; padding: 48px 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eef1f5; } /* Badge */ .cta-badge { display: inline-block; font-size: 13px; font-weight: 500; color: #2563eb; background: #eff6ff; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } /* Title */ .cta-title { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 14px; } .cta-title span { color: #2563eb; } /* Description */ .cta-desc { color: #64748b; font-size: 16px; max-width: 620px; margin: 0 auto 32px; line-height: 1.6; } /* Stats */ .cta-stats { margin-bottom: 32px; } .stat-value { font-size: 20px; font-weight: 700; color: #0f172a; } .stat-label { font-size: 13px; color: #64748b; margin-top: 4px; } /* Buttons */ .cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .btn-primary { background: #2563eb; border: none; padding: 12px 26px; font-weight: 500; border-radius: 8px; } .btn-primary:hover { background: #1e4ed8; } .btn-light { background: #f1f5f9; border: 1px solid #e2e8f0; color: #0f172a; padding: 12px 22px; border-radius: 8px; } .btn-light:hover { background: #e2e8f0; } /* Responsive tweak */ @media (max-width: 768px) { .cta-title { font-size: 26px; } .cta-box { padding: 32px 20px; } } </style> <p class="rbt-header-top rbt-header-top-2 bg-not-transparent bg-gradient-7 color-white ptb--15 d-xl-block text-center mb--40 mt--40" id="footerAd1"> <img src="https://indibloghub.com/public/images/loader_icon.gif"> </p> <footer class="rbt-footer footer-style-1"> <div class="footer-tops"> <div class="container"> <div class="row row--15 mt_dec--30"> <div class="col-lg-5 col-md-6 col-sm-6 col-12 mt--30"> <div class="footer-widget"> <div class="logo"> <a href="https://indibloghub.com"> <img src="https://indibloghub.com/public/images/indibloghub_logo.png" alt="IndiBlogHub"> </a> </div> <p class="description mt--10 rbt-link-hover"> IndiBlogHub.com is an AI-powered content publishing platform that enhances every published article with intelligent metadata optimization, internal linking, and rapid 48-hour indexing supported by DR 60+ authority signals — helping publishers, brands, and agencies publish content that gains lasting visibility online. </p> <p class="description mt--40 rbt-link-hover"> For support or general inquiries, please contact us at  <a href="mailto:support@indibloghub.com" class="text-primary" target="_blank"> <u>support@indibloghub.com</u> </a> </p> </div> </div> <div class="col-lg-2 col-md-6 col-sm-6 col-12 mt--30"> <div class="footer-widget"> <p class="ft-title text-decoration-underline">Categories</p> <ul class="ft-link"> <li> <a href="https://indibloghub.com/hubs/travel-lifestyle">» Travel & Lifestyle</a> </li> <li> <a href="https://indibloghub.com/hubs/education">» Education & Career</a> </li> <li> <a href="https://indibloghub.com/hubs/business-finance">» Business & Finance</a> </li> <li> <a href="https://indibloghub.com/hubs/digital-marketing">» Digital Marketing</a> </li> <li> <a href="https://indibloghub.com/hubs/tech-ai">» Technology & AI</a> </li> <li> <a href="https://indibloghub.com/hubs/health-wellness">» Health & Wellness</a> </li> <li> <a href="https://indibloghub.com/hubs/entertainment-media">» Entertainment & Media</a> </li> </ul> </div> </div> <div class="col-lg-3 col-md-6 col-sm-6 col-12 mt--30"> <div class="footer-widget"> <p class="ft-title text-decoration-underline">Popular Topics</p> <ul class="ft-link"> <li> <a href="https://indibloghub.com/topics/online-security">» Online Security</a> </li> <li> <a href="https://indibloghub.com/topics/trip-planning">» Trip Planning</a> </li> <li> <a href="https://indibloghub.com/topics/sports-gear-performance">» Sports Gear & Performance</a> </li> <li> <a href="https://indibloghub.com/topics/ad-copywriting">» Ad Copywriting</a> </li> <li> <a href="https://indibloghub.com/topics/workout-routines">» Workout Routines</a> </li> <li> <a href="https://indibloghub.com/topics/blog-monetization">» Blog Monetization</a> </li> <li> <a href="https://indibloghub.com/topics" class="text-primary">» Browse all</a> </li> </ul> </div> </div> <div class="col-lg-2 col-md-6 col-sm-6 col-12 mt--30"> <div class="footer-widget"> <p class="ft-title text-decoration-underline">Links</p> <ul class="ft-link"> <li> <a href="https://indibloghub.com/hubs">» Categories</a> </li> <li> <a href="https://indibloghub.com/topics">» Popular Topics</a> </li> <li> <a href="https://indibloghub.com/creators">» Top Publishers</a> </li> <li> <a href="https://indibloghub.com/articles">» Publications</a> </li> <li> <a href="https://indibloghub.com/about-us">» About IndiBlogHub</a> </li> <li><a href="https://indibloghub.com/privacy-policy">» Privacy policy</a></li> <li><a href="https://indibloghub.com/disclaimer">» Disclaimer</a></li> </ul> </div> </div> </div> </div> </div> </footer> <br> <div class="rbt-separator-mid"> <div class="container"> <hr class="rbt-separator m-0"> </div> </div> <div class="copyright-area copyright-style-1 ptb--20"> <div class="container"> <p class="text-center"> © 2019–2026 <a href="https://indibloghub.com" class="text-primary">IndiBlogHub.com</a>. All rights reserved.    Hosted on:  <u><a href="https://m.do.co/c/6f351e76455b" target="_blank" class="text-primary" rel="noopener noreferrer">DigitalOcean</a></u> </p> </div> </div> </main> <div class="rbt-progress-parent"> <svg class="rbt-back-circle svg-inner" width="100%" height="100%" viewBox="-1 -1 102 102"> <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" /> </svg> </div> <script src="https://cdn.indibloghub.com/js/vendor/modernizr.min.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/jquery.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/bootstrap.min.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/sal.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/swiper.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/jquery-appear.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/odometer.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/backtotop.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/isotop.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/imageloaded.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/wow.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/waypoint.min.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/easypie.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/text-type.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/jquery-one-page-nav.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/bootstrap-select.min.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/jquery-ui.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/magnify-popup.min.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/paralax-scroll.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/paralax.min.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/countdown.js"></script> <script src="https://cdn.indibloghub.com/js/vendor/plyr.js"></script> <script src="https://cdn.indibloghub.com/js/main.js"></script> <script type="text/javascript"> function Imglazyloading(){ $('img').each(function () { let img = $(this); let dataSrc = img.attr('data-src'); if (!dataSrc) return; let isImage = /\.(jpg|jpeg|png|gif|webp|svg|avif)(\?.*)?$/i.test(dataSrc); if (!isImage) { img.attr('data-src', ''); return; } let tester = new Image(); tester.onload = function () { img.attr('src', dataSrc); }; tester.src = dataSrc; }); } $(document).ready(function(){ Imglazyloading(); }); $(document).ready(function() { $(document).on("click",".read_more_content",function(e){ $(this).hide(); $('.show_more_content').show(); }); $(document).on("click",".share_popup",function(e){ e.preventDefault(); window.open($(this).attr('href'), 'fbShareWindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); return false; }); }); if (window.location.href.indexOf("cid") > -1) { var res = $(location).attr('href').split("#cid"); if(res[1] > 0) { var target = $('#cid'+res[1]); $('html,body').animate({ scrollTop: target.offset().top-130 }, 1000); $('#cid'+res[1]).addClass('p-5').css("background-color","rgb(248 233 236)"); } } $(document).on("change",".filter_select",function(){ var url = $(this).val(); if(url) { url = "https://indibloghub.com/post/a-beginner-s-guide-to-using-svg-files?s="+$(this).val(); window.location = url; } }); $('.no_follow_content a').each(function() { var $this = $(this); var href = $this.attr('href') || ''; if (href.indexOf('indibloghub.com') === -1) { // External link → add rel + target $this.attr("rel", "noopener ugc nofollow").attr("target", "_blank"); } else { // Internal link → only target $this.attr("target", "_blank"); } }); $('.follow_content a').each(function() { $(this).removeAttr('rel').attr('target', '_blank'); }); function manage_height_section() { var main = 0,section_class='.manage_height'; $(section_class).removeAttr('style'); $(section_class).each(function(){ if($(this).height() > main) { main = $(this).height(); } }); $(section_class).height(main+"px"); } manage_height_section(); $(document).ready(function () { var query = window.location.search; if ( query.indexOf('s=') > -1 || query.indexOf('page=') > -1 || query.indexOf('q=') > -1 || query.indexOf('tab=') > -1 || query.indexOf('topic_id=') > -1 ) { var $target = $('#blog_section'); if ($target.length) { $('html, body').stop(true).animate( { scrollTop: $target.offset().top - 130 }, 1400, // longer = smoother 'swing' // default easing ); } } }); $(document).on("click",".callConfirm",function(){ var confirm_default = "Are you sure you want to delete it!"; var r = confirm(confirm_default); if (r == true) { return true; } else { return false; } }); $('.comment_desc, .description').each(function(){ var str = $(this).html(); var regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;; var replaced_text = str.replace(regex, "<a class='text_primary_light' rel='noindex' href='$1' target='_blank'>$1</a>"); $(this).html(replaced_text); }); $('.username_href').each(function(){ var username = $(this).data("username"); var profile_url = "https://indibloghub.com/profile"; $(this).attr("href",profile_url+"/"+username).attr("class","text-primary"); }); $(document).on("click",".reply_comment",function(){ var id = $(this).attr("id"); $('.uname').val("@"+$(this).attr("data-username")+" "); $('#rep_id').val(id); }); $(document).on("click",".comment_section",function(){ $('html,body').animate({ scrollTop: $('#comment_section').offset().top-130 }, 2000); }); $(document).on("click",".click_me",function(){ var url = $(this).attr("id"); window.location = url; }); $(document).on("click",".scroll_me",function(){ var id = $(this).attr("id"); var target = $('#tabs'+id); $('html,body').animate({ scrollTop: target.offset().top-100 }, 1000); }); setTimeout(function() { $('#footerAd1').load("https://indibloghub.com/render_web_ajax_view/footer_ad_section"); }, 1000); </script> <script> $('.content_desc').each(function () { $(this).find('a').each(function () { if (!$(this).parent().is('u')) { $(this).wrap('<u></u>'); } }); }); </script> </body> </html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9dfed52a7c2aa594',t:'MTc3NDExNTc4MA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="554f23444bc3c06ca8695e8c-|49" defer></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>